欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Dreamweaver中CSS怎么制作徑向圓形漸變?

百度經(jīng)驗   發(fā)布時間：2018-08-01 09:52:23   作者：yangxin_25   我要評論
Dreamweaver中CSS怎么制作徑向圓形漸變？Dreamweaver中可以利用DIV+CSS制作圓形漸變效果，今天我們就來介紹五種簡單的制作方法，需要的朋友可以參考下

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

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

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

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

第二種：簡單的圓形漸變

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

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

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

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

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

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

【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、為了方便經(jīng)驗的朋友們觀察，加了個邊框可以看出效果。

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

以上就是Dreamweaver圓形漸變色的制作方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Dreamweaver怎么繪制視化表格?

Dreamweaver中怎么鏈接本地視頻?

Dreamweaver怎么怎么利用層布局網(wǎng)頁?

相關(guān)文章

最新評論