ss3的漸層如何使用
- php中世界最好的语言原創
- 2018-03-16 13:39:072059瀏覽
這次帶給大家ss3的漸變如何使用，使用ss3的漸變的注意事項有哪些，下面就是實戰案例，一起來看一下。
《CSS揭秘》這本書非常不錯，充滿了乾貨和驚喜。以下主要是關於使用漸層做出來的一些效果的筆記。請用最新的現代瀏覽器觀看。
首先要回顧下一個css語句：
linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
這是線性漸變，第一個參數是漸變方向，是可選的。可以是角度，angle的值是度數，例如45deg，90deg。也可以使用to side-or-corner .例如 to left（從右到左） ,to bottom(從上到下)；第二個和第三個參數都是漸變顏色。所以最簡單的寫法可以有：
background: linear-gradient(aquamarine,orange)
預設是從上往下漸層。但如果我們不要漸變，就要色條。訣竅就是兩種顏色之間不要留空隙，因為留了空隙就會出現漸變的過渡效果。所以我們可以設定各佔50%。這個50%代表顏色位置。也可以是長度單位。
background: linear-gradient(aquamarine 50%,orange 50%)
如果我們需要多種顏色呢，例如一個藍白紅。
background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%,crimson 0 ,crimson )
注意到三個0和最後的crimon顏色沒有色標。第一個aqua 0 ,aqua 33% 表示aqua佔了33%，而第二個白色卻是 white 0 ,white 67%，看起來是佔了67%，其實是從33%開始的。
如果某個色標的位置比它之前的位置都要小，則色標的位置會被設定為前面所以色標位置的最大值。
所以第二個0代表的是33%，第三個0代表的是67%。你可以將0改成小於這兩個值的值，效果是一樣的。而最後一個顏色，不用色標也會自動填滿。所以如果我們只想畫個線條，漸層顏色可以使用透明色：
linear-gradient(white 2px, transparent 0)
但如果我們要實現重複效果，還需要background-size的配合。 background-size預設是 100% 100%。但如果定義了大小，等於是把整個面積分割成重複的小塊。
網格1：
<br>
.grid {
width: 225px;
height: 225px;
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0);
background-size: 75px 75px, 75px, 75px;
}
第一個漸層是將225px 橫著分成了三等分。然後第二個漸變，垂直分成了三等分。這是肉眼看到的效果，其實是9個75px*75px的方塊拼出來的結果。
網格2：
<br>
background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0),linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0); background-size: 75px 75px, 75px 75px,15px 15px,15px 15px;
那這個網格實作就簡單了。再疊加漸變，每個75再分成5個15。這效果看著像瓷磚。
棋盤
<br>
但是要如何畫出一個棋盤呢？注意線條不是連貫的哦。如上圖，根據上面background-size的思路，我們知道這樣的棋盤是有多個這樣的正方形組成的。
而這兩個正方形，又是由四個三角形組成的。 線性漸變的一個特點就是會在background-size的區域裡，一條線上只有一種顏色。
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,#bbb 0),linear-gradient(45deg, #ffbb33 25%, transparent 0),linear-gradient(45deg, transparent 75%,#ffbb33 0); background-size: 30px 30px; background-position: 0 0, 15px 15px,15px 15px, 30px 30px;
注意到也使用了一組background-position，第一個#bbb色是佔了45度方向的25%，而第二個#bbb色是佔45度方向最後的25% 。如果把第二個三角形換成紅色，然後位置從0,0開始就一目了然了。
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,red 0); background-size: 30px 30px; background-position: 0 0, 0px 0px,15px 15px, 30px 30px;
將紅色三角形位置改為15px,15px 就湊成了一個正方形。同理再疊加出一個正方形就得到了棋盤的格式。同理，我們可以拼湊一個休息的格子。
讓三角形每次轉90度，不必移動位置。
background-image: linear-gradient(45deg, red 0, red 25%,transparent 0), linear-gradient(135deg, orange 0, orange 25%,transparent 0),linear-gradient(225deg, yellow 0, yellow 25%,transparent 0),linear-gradient(315deg, green 0, green 25%,transparent 0)
<br>
斜網格
有了上面的積累，畫一個斜格子就簡單了：
background-image: linear-gradient(45deg,transparent 49% ,black 0,black 51% ,transparent 0), linear-gradient(135deg,transparent 49% ,black 0,black 51% ,transparent 0); background-size: 30px 30px;
相当于是每个单元就渐变了两条斜线。
斜格子
一直去拼这种单元可能让你有点烦，于是出来了repeating-linear-gradient。
background: repeating-linear-gradient( 45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em );
注意到颜色都是成对出现。这样才会出现我们的色条。注意这里使用了background-blend-mode: multiply; 混合模式。不然效果没有这么好看。
圆点:
思路和上面一样，使用径向渐变叠加和错位
background-image:radial-gradient(#fff 5px,transparent 0),radial-gradient(#fff 10px, transparent 0); background-size: 40px; background-position: 0 0, 20px 20px;
沙发
沙发这个效果比较复杂，使用了径向渐变制作圆点和阴影，线性渐变勾勒出线条。
background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0 ; background-color: #300; background-size: 100px 100px;
radial-gradient语法：
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
看上去有点复杂，[]表示一个参数，[]?表示这个参数可选，| 表示这两个参数二选一，||表示这两个参数可以同时存在，'，'号表示这个参数结束。包含形状，中心点位置，扩展关键字和颜色。形状分圆形(circle)和椭圆(ellipse)，位置可以是长度/百分比/简写的left、center等。颜色和线性渐变一样，比如渐变一个太阳：
background:radial-gradient(at 45px 45px,rgb(248, 242, 209),gold,#FFF);
<br>
不过这里的at不仅影响着渐变的中心点而且还影响着渐变的形状。 如果加上background-size我们可以得到一块饼干：想吃么 (*^^*) ……
而扩展关键字主要有下面几种情况
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
background:radial-gradient(circle closest-side ,aqua,gold);
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
background:radial-gradient(circle closest-corner ,aqua,gold);
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
background:radial-gradient(circle farthest-side at 30% 30% ,aqua,gold);
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
background:radial-gradient(circle farthest-corner at 30% 30% ,aqua,gold);
如果我们想画出色圈呢，这就要用到线性渐变中的技巧。
background:radial-gradient(white 0,white 10%,red 0, red 20%,white 0,white 30%,red 0,red 40%,white 0,white 50%,red 0,red 60%,white 0,white 100%);
小结：这些效果还是蛮有意思的，这一篇主要是学习了 linear-gradient，repeating-linear-gradient以及background-size、background-position来实现网格效果，最后还用到了radial-gradient，径向渐变的花样更多，所有的效果基本都是基于渐变叠加和重复，更多的效果可以参考下面的链接。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
jQuery、Angular、node中的Promise详解<br>
以上是ss3的漸層如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！