CSS3漸變——gradient

時間 2019-11-19

標籤 css3 css 漸變 gradient 欄目 CSS 简体版

原文原文鏈接

　　漸變是CSS3中的一個新加特性，能夠讓顏色之間平穩過渡，讓頁面樣式更爲炫酷html

　　書寫漸變屬性時，注意添加前綴（不一樣瀏覽器的兼容性不一樣）web

線性漸變liner-gradient

　　沿着一根隱形的軸線，從起點到終點實現顏色的順序漸變chrome

　　默認從上到下，也可左右/對角線漸變，不一樣的瀏覽器設置的方法也略有區別（見下圖）瀏覽器

　　主要區別在：chrome設置起始位置，而其餘的（包括通用方法）都設置結束位置ide

角度

　　以y軸的正方向爲0deg，順時針爲正，逆時針爲負，最大角度爲180deg（即範圍爲-180deg~180deg）ui

　　不書寫前綴時的角度方向以下：spa

　　webkit內核的瀏覽器（Chrome）的角度表示方法以下：code

　　代碼及效果圖以下：orm

結點

　　能夠設置多種顏色的漸變，用多個結點表示，其中每一個顏色後加絕對單位（px）/相對單位（%）htm

　　首尾兩個顏色不加單位時，默認分別爲0%和100%

　　也可實現透明色的漸變效果（用兩個rgba書寫）

重複

　　讓漸變效果在指定的區域內有重複，只須要在linear前加repeating便可

　　重複的次數看開始和結束顏色百分比

徑向漸變radial gradient

　　從起點到終點進行圓形的漸變

分佈

　　默認是均勻分佈（在沒有給各個顏色分配長度/百分比時）

　　也能夠和線性漸變同樣，給不一樣顏色設置長度/百分比，以實現不均勻的分佈

尺寸

　　漸變形狀能夠爲圓形（circle）或橢圓（ellipse，默認值）

　　（有時候元素設置成了正多邊形，會誤覺得默認爲圓形）

　　其中圓心的位置能夠設置水平偏移和豎直偏移，尺寸的修改須要用四個參數調整（最近/遠邊/角）

重複

　　同線性漸變一致，加repeating來設置重複

IE漸變

　　只限於IE6-8

　　用如下的語法表達（實際用的是濾鏡的方法）：

　　　　filter:progid:DXimageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='ff0000',GradientType=0);

　　其中開始和結束的顏色是用16進制來表達的

漸變的應用

馬賽克地磚的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div{
10             width:500px;height:500px;
11             margin:30px auto;
12             border:1px dashed black;
13             background:#abcdef;
14             background-size:50px 50px;
15             background-image:linear-gradient(45deg,red 25%,transparent 25%),
16                        linear-gradient(-45deg,red 25%,transparent 25%),
17                        linear-gradient(45deg,transparent 75%,red 75%),
18                        linear-gradient(-45deg,transparent 75%,red 75%);
19         }
20     </style>
21 </head>
22 <body>
23     <div></div>
24 </body>
25 </html>

馬賽克地磚

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。