【详细解读】CSS渐变用法——Web前端系列学习笔记
生活随笔
收集整理的這篇文章主要介紹了
【详细解读】CSS渐变用法——Web前端系列学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 線性漸變
- 屬性解析
- 實例代碼
- 效果圖
- 徑向漸變
- 屬性解析
- 示例代碼
- 效果圖
- 多學一招：重復漸變
線性漸變
屬性解析
通過關鍵詞來確定漸變的方向。默認值為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：表示漸變的角度，角度數的取值范圍是0~365deg。這個角度是以圓心為起點的角度，并以這個角度為發散方向進行漸變。
color stop：用于設置顏色邊界，color為邊界的顏色，stop為該邊界的位置，stop的值為像素數值或百分比數值，若為百分比且小于0%或大于100%則表示該邊界位于可視區域外。兩個 color stop 之間的區域為顏色過渡區。
實例代碼
<!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(圓心坐標, 漸變形狀 漸變大小, color stop, color stop[, color stop]*);圓心坐標：用于設置放射的圓形坐標，可設置為形如10px 20px的 x-offset y-offset ，或使用預設值center（默認值）。
漸變形狀：circle ：圓形。ellipse：橢圓形，默認值。
漸變大小：
- closest-side 或 contain :以距離圓心最近的邊的距離作為漸變半徑。
- closest-corner:以距離圓心最近的角的距離作為漸變半徑。
- farthest-side:以距離圓心最遠的邊的距離作為漸變半徑。
- farthest-corner 或 cove:以距離圓心最遠的角的距離作為漸變半徑。
示例代碼
<!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 橫坐標和縱坐標都是100 默認值是center*//*2 所有的百分比都是半徑長度百分比，都是模糊半徑（暫定）如第一層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>效果圖
多學一招：重復漸變
了解了線性漸變和徑向漸變的使用方法后，接下介紹一下重復漸變。對以上兩種漸變方式都是適用的，只需在兩個屬性前添加“ repeating-“,具體語法格式如下：
/*線性重復漸變*/ repeating-linear-gradient(起始角度, color stop, color stop[, color stop]*) /*徑向重復漸變*/ repeating-radial-gradient(圓心坐標, 漸變形狀 漸變大小, color stop, color stop[, color stop]*)總結
以上是生活随笔為你收集整理的【详细解读】CSS渐变用法——Web前端系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【详解】CSS阴影用法——Web前端系列
- 下一篇： 面试官问我圆角边框，我交出了满分的答卷！