第一種：基礎簡單漸變

1、我們先建立個網頁，并寫入<div></div>標簽，并引入CSS樣式。

2、定義IDV的寬和高，然后利用背景漸變來實現漸變【width: 400px; height: 400px;background: radial-gradient(yellow, red);】。

第二種：簡單的圓形漸變

通過如下代碼也可以實現，幾乎和第一種一樣。

【width: 400px; height: 400px;background: radial-gradient(circle, yellow, red);】

第三種：指定圓形漸變的起始位置

1、可以通過如下代碼實現。

【  width: 400px; height: 400px;background: radial-gradient(circle at 50px 50px, yellow, red);】

2、指定起始位置也可以使用百分比來實現起始位置。

【width: 400px; height: 400px;    background: radial-gradient(circle at 12.5% 25%, yellow, red);】

第四種：指定終止點位置

【width: 400px; height: 400px;    background: radial-gradient(closest-side circle at 50px 50px, yellow, red);】

第五種：指定漸變顏色斷點

1、為了方便經驗的朋友們觀察，加了個邊框可以看出效果。

【width: 400px; height: 400px;    border: 1px solid silver;    background: radial-gradient(closest-side circle, yellow, orange, red, white);】

以上就是Dreamweaver圓形漸變色的制作方法，希望大家喜歡，請繼續關注VeVb武林網。