Dreamweaver設(shè)計網(wǎng)頁很簡單，今天我們就來看看利用CSS來繪制圓形徑向漸變的方法，可以通過【 radial-gradient】來實(shí)現(xiàn)，下面分享五種方法，請看下文詳細(xì)介紹。

第一種：基礎(chǔ)簡單漸變

1、我們先建立個網(wǎng)頁，并寫入<div></div>標(biāo)簽，并引入CSS樣式。

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

第二種：簡單的圓形漸變

通過如下代碼也可以實(shí)現(xiàn)，幾乎和第一種一樣。

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

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

1、可以通過如下代碼實(shí)現(xiàn)。

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

2、指定起始位置也可以使用百分比來實(shí)現(xiàn)起始位置。

width: 400px; height: 400px;

background: radial-gradient(circle at 12.5% 25%, yellow, red);

第四種：指定終止點(diǎn)位置

width: 400px; height: 400px;

background: radial-gradient(closest-side circle at 50px 50px, yellow, red);

第五種：指定漸變顏色斷點(diǎn)

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

width: 400px; height: 400px;

border: 1px solid silver;

background: radial-gradient(closest-side circle, yellow, orange, red, white);

以上就是Dreamweaver圓形漸變色的制作方法，希望大家喜歡，