【详细解读】CSS渐变用法——Web前端系列学习笔记
文章目錄
- 線性漸變
- 屬性解析
- 實(shí)例代碼
- 效果圖
- 徑向漸變
- 屬性解析
- 示例代碼
- 效果圖
- 多學(xué)一招：重復(fù)漸變
線性漸變
屬性解析
通過關(guān)鍵詞來(lái)確定漸變的方向。默認(rèn)值為top（從上向下），取值范圍是 [left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]。注意：IE10只能取[left,top]，Chrome則沒有[center,left center,right center]。
background-image:linear-gradient([ <angle> | <side-or-corner>,] color stop, color stop[, color stop]*);angle：表示漸變的角度，角度數(shù)的取值范圍是0~365deg。這個(gè)角度是以圓心為起點(diǎn)的角度，并以這個(gè)角度為發(fā)散方向進(jìn)行漸變。
color stop：用于設(shè)置顏色邊界，color為邊界的顏色，stop為該邊界的位置，stop的值為像素?cái)?shù)值或百分比數(shù)值，若為百分比且小于0%或大于100%則表示該邊界位于可視區(qū)域外。兩個(gè) color stop 之間的區(qū)域?yàn)轭伾^渡區(qū)。
實(shí)例代碼
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>CSS3線性漸變</title> </head> <style type="text/css">.rainbow-linear-gradient{width: 460px;height: 160px;/*漸變的方向 上下左右 中心 左上左下右上右下 or 以角度漸變。如45deg*/background-image: -webkit-linear-gradient(left, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);} </style> <body> <div class="rainbow-linear-gradient"></div> </body> </html>效果圖
徑向漸變
屬性解析
background-image: radial-gradient(圓心坐標(biāo), 漸變形狀 漸變大小, color stop, color stop[, color stop]*);圓心坐標(biāo)：用于設(shè)置放射的圓形坐標(biāo)，可設(shè)置為形如10px 20px的 x-offset y-offset ，或使用預(yù)設(shè)值center（默認(rèn)值）。
漸變形狀：circle ：圓形。ellipse：橢圓形，默認(rèn)值。
漸變大小：
- closest-side 或 contain :以距離圓心最近的邊的距離作為漸變半徑。
- closest-corner:以距離圓心最近的角的距離作為漸變半徑。
- farthest-side:以距離圓心最遠(yuǎn)的邊的距離作為漸變半徑。
- farthest-corner 或 cove:以距離圓心最遠(yuǎn)的角的距離作為漸變半徑。
示例代碼
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>CSS3徑向漸變</title><style type="text/css">.rainbow-radial-gradient{width: 300px;height: 300px;/*從中心開始依次占比*//*1 橫坐標(biāo)和縱坐標(biāo)都是100 默認(rèn)值是center*//*2 所有的百分比都是半徑長(zhǎng)度百分比，都是模糊半徑（暫定）如第一層10% 第二層20% 則0%-10%都是具體的顏色，10%-20%為第一層顏色的模糊 20%-60%是第二層顏色的模糊60%以后是背景顏色*/background-image: -webkit-radial-gradient(100px 100px , #000 10%, #ffb151 20%, #16104b 60%);}</style> </head> <body> <div class="rainbow-radial-gradient"></div> </body> </html>效果圖
多學(xué)一招：重復(fù)漸變
了解了線性漸變和徑向漸變的使用方法后，接下介紹一下重復(fù)漸變。對(duì)以上兩種漸變方式都是適用的，只需在兩個(gè)屬性前添加“ repeating-“,具體語(yǔ)法格式如下：
/*線性重復(fù)漸變*/ repeating-linear-gradient(起始角度, color stop, color stop[, color stop]*) /*徑向重復(fù)漸變*/ repeating-radial-gradient(圓心坐標(biāo), 漸變形狀 漸變大小, color stop, color stop[, color stop]*)總結(jié)
以上是生活随笔為你收集整理的【详细解读】CSS渐变用法——Web前端系列学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【详解】CSS阴影用法——Web前端系列
- 下一篇： 面试官问我圆角边框，我交出了满分的答卷！