Dreamweaver中CSS怎么制作徑向圓形漸變?
我要評論Dreamweaver設(shè)計(jì)網(wǎng)頁很簡單，今天我們就來看看利用CSS來繪制圓形徑向漸變的方法，可以通過【 radial-gradient】來實(shí)現(xiàn)，下面分享五種方法，請看下文詳細(xì)介紹。
Adobe Dreamweaver CC 2018 V18.0 中文/英文安裝版 32/64位
- 類型：網(wǎng)頁設(shè)計(jì)
- 大?。?/span>968MB
- 語言：簡體中文
- 時(shí)間：2017-10-19
第一種：基礎(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圓形漸變色的制作方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
相關(guān)文章
DreamWeaver文字怎么居中對齊? dw垂直居中對齊的技巧
DreamWeaver文字怎么居中對齊？DreamWeaver中輸入的文字想要實(shí)現(xiàn)居中對齊，該怎么居中呢？下面我們就來看看dw垂直居中對齊的技巧，需要的朋友可以參考下2018-05-10
dreamweaver怎么制作文本框? dw文本框的兩種制作方法
dreamweaver怎么制作文本框？dreamweaver制作的網(wǎng)頁需要文本框，該怎么制作文本框呢？今天我們就來介紹dw文本框的兩種制作方法，需要的朋友可以參考下2018-04-28
dreamweaver怎么實(shí)現(xiàn)鼠標(biāo)放在不同的位置顯示不同的圖片?
dreamweaver怎么實(shí)現(xiàn)鼠標(biāo)放在不同的位置顯示不同的圖片？dw中想要制作圖片切換效果 ，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-04-28
Dreamweaver CS6超鏈接怎么去掉下劃線? dw取消字體下劃線的教程
Dreamweaver CS6超鏈接怎么去掉下劃線？Dreamweaver CS6中給文本添加超鏈接以后，文本下方會出現(xiàn)下劃線，想要去掉下劃線，以后都不顯示，該怎么設(shè)置呢？下面我們就來看看dw2018-04-28
Dreamweaver圖像怎么通過img標(biāo)簽定義高寬?
Dreamweaver圖像怎么通過img標(biāo)簽定義高寬？Dreamweaver頁面中插入圖片以后，想要通過img標(biāo)簽定義圖片的高度和寬度，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要的朋友2018-04-27
dreamweaver怎么制作各種類型的菜單欄？dreamweaver設(shè)計(jì)網(wǎng)頁的時(shí)候，需要添加菜單欄，該怎么制作各種類型的菜單欄呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-04-22
Dreamweaver中的AP元素怎么修改寬度高度和顏色？Dreamweaver中插入的ap元件想要修改高度寬度或者顏色，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-04-21
Dreamweaver如何給div添加css樣式? dw給div添加css樣式的方法
Dreamweaver如何給div添加css樣式？Dreamweaver中想要給div添加樣式，該怎么添加css樣式呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-04-10
Dreamweaver數(shù)據(jù)庫連接出現(xiàn)錯(cuò)誤404該怎么解決?
Dreamweaver數(shù)據(jù)庫連接出現(xiàn)錯(cuò)誤404該怎么解決？Dreamweaver在連接數(shù)據(jù)庫的時(shí)候出現(xiàn)404錯(cuò)誤，該怎么解決呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-04-04
Dreamweaver cs6怎么設(shè)計(jì)一款簡單的網(wǎng)頁?
Dreamweaver cs6怎么設(shè)計(jì)一款簡單的網(wǎng)頁？Dreamweaver中想要設(shè)計(jì)一款簡單的網(wǎng)頁，該怎么設(shè)計(jì)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-02-27
