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

1、我們先建立個(gè)網(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)驗(yàn)的朋友們觀察，加了個(gè)邊框可以看出效果。

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

以上就是Dreamweaver圓形漸變色的制作方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注VeVb武林網(wǎng)。