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