CSS 實(shí)現(xiàn)漸變效果小結(jié)( linear-gradient線性漸變 和 radial-gradient徑向漸變)
發(fā)布時(shí)間：2020-04-16 15:08:33 作者：就是愛吃肉ro 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS 實(shí)現(xiàn)漸變效果的代碼( linear-gradient線性漸變 和 radial-gradient徑向漸變),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
線性漸變( linear-gradient )
background-image: linear-gradient(to 方向, 開始顏色, 中間顏色1, 中間顏色2, ... , 結(jié)束顏色 );
四個(gè)方向的組合-八個(gè)方向
top, right, bottom, left
角度
90deg
徑向漸變( radial-gradient )
background-image: radial-gradient(大小 形狀 at 方向, 開始顏色, 中間顏色1, 中間顏色2, ..., 結(jié)束顏色 );
大小 : 圓半徑一個(gè)值 或者 橢圓半長(zhǎng)軸和半短軸兩個(gè)值
百分比 / 像素
形狀
circle
ellipse
方向
百分比 / 像素
closest-side/closest-corner/farthest-side/farthest-corner
background-image: radial-gradient(800px circle at 50% 50%, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
總結(jié)
到此這篇關(guān)于CSS 實(shí)現(xiàn)漸變效果小結(jié)( linear-gradient線性漸變 和 radial-gradient徑向漸變)的文章就介紹到這了,更多相關(guān)css 漸變效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3 linear-gradient線性漸變生成加號(hào)和減號(hào)的方法
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號(hào)和減號(hào)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-21
CSS3,線性漸變（linear-gradient）的使用總結(jié)
今天這篇文章我們?cè)谝黄饋砜纯?CSS3 中實(shí)現(xiàn)漸變效果的 Gradient 屬性的具體用法。在以前，漸變效果和陰影、圓角效果一樣都是做成圖片，直接編寫 CSS 代碼就可以實(shí)現(xiàn)。2017-01-09- 這篇文章主要為大家詳細(xì)介紹了CSS3 漸變（Gradients）之CSS3 線性漸變的相關(guān)資料，了解學(xué)習(xí)CSS3 線性漸變，感興趣的小伙伴們可以參考一下2016-07-08
利用CSS3的線性漸變linear-gradient制作邊框的示例
linear-gradient線條用來制作邊框還是比較給力的,尤其是利用其描邊可以制作一些復(fù)制的邊框效果,這里我們就來看一下利用CSS3的線性漸變linear-gradient制作邊框的示例2016-06-02- 下面小編就為大家?guī)硪黄钊肫饰鯟SS中的線性漸變linear-gradient。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-12
- 這篇文章主要介紹了CSS3中顏色線性漸變實(shí)戰(zhàn),示例中展示了代碼設(shè)置不同漸變方向的效果,需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS3中線性顏色漸變的一些實(shí)現(xiàn)方法,包括分Safari和Chrome的webkit內(nèi)核與Firefox的Gecko內(nèi)核兩種情況,需要的朋友可以參考下2015-07-14
這篇文章主要介紹了CSS3實(shí)現(xiàn)線性漸變用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-07
