CSS3_線性漸變_徑向漸變----背景

時間 2019-11-08

標籤 css3 css 線性漸變徑向背景欄目 CSS 简体版

原文原文鏈接

漸變的本質：繪製一張背景圖片，因此使用 background 或者 background-imagecss

background 的諸多屬性，漸變都是可使用的（repeat，position）html

百分比：把元素漸變方向的總體長度當作 100%ide

線性漸變背景動畫

使用：（至少三個參數，從第二個參數開始，都是顏色）
background-image: linear-gradient( 方向開始顏色結束顏色);

方向

默認值（從上到下）

background-image: linear-gradient(#000, #fff);

to right 到右

background-image: linear-gradient(to right, #000, #fff);
background-image: linear-gradient(to left, #000, #fff);
background-image: linear-gradient(to top, #000, #fff);
background-image: linear-gradient(to bottom, #000, #fff);

to right bottom 到右下角

background-image: linear-gradient(to right bottom, #000, #fff);
background-image: linear-gradient(to right top, #000, #fff);
background-image: linear-gradient(to left top, #000, #fff);
background-image: linear-gradient(to left bottom, #000, #fff);

角度 deg

background-image: linear-gradient(0deg, #000, #fff);
background-image: linear-gradient(90deg, #000, #fff);
background-image: linear-gradient(180deg, #000, #fff);
background-image: linear-gradient(270deg, #000, #fff);

background-image: linear-gradient(45deg, #000, #fff);
background-image: linear-gradient(135deg, #000, #fff);
background-image: linear-gradient(225deg, #000, #fff);
background-image: linear-gradient(315deg, #000, #fff);

background-image: linear-gradient(-45deg #000, #fff);
background-image: linear-gradient(-90deg #000, #fff);

顏色結點

background-image: linear-gradient(red %10， green 20%， blue 30%, yellow 40%);

/*
從 0% 到 10% 爲 red
從 10% 到 20% 爲 red 到 green 的漸變
從 20% 到 30% 爲 green 到 blue 的漸變
從 30% 到 40% 爲 blue 到 yellow 的漸變
從 40% 到 100% 爲 yellow 


最後一個顏色百分比不寫，默認到 100%
第一個顏色百分比不寫，默認 0%
*/

應用： 45 度紅白格（馬賽克地磚）
明確的顏色分割線（red 25%, white 25%）
多重漸變背景，以逗號隔開，適當位置設置透明顏色
- 123

重複的線性漸變 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);spa

顏色結點，除了能夠寫百分值，還能夠寫一個具體的像素值。寫像素值，必須寫兩個值：起始和結束。
- ```
background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px;    // 髮廊燈
```

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            #outer_box {
                width: 100px;
                height: 300px;
                margin: 300px auto 0;
                
                overflow: hidden
            }
            
            #inner_box {
                width: 100px;
                height: 3000px;
                margin-top: -900px;
                
                background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);
            }
            
            #inner_box:hover {
                margin-top: 0px;
                transition: 9s;
            }
        </style>
    </head>
    
    <body>
        
        <div id="outer_box">
            <div id="inner_box">
            </div>
        </div>

    </body>
</html>

文字光斑動畫
文字要設置透明 color: rgba(255, 255, 255, 0.3);
3

徑向漸變背景 background-image: radia-gradient(形狀尺寸, 開始顏色, 結束顏色);code

從起點到終點，顏色從內向外漸變。htm

形狀尺寸 參數
circle 默認形狀，圓形
當 width 相等 height 時，老是圓形
當 width ！= height 時，是橢圓

顏色結點
百分比，參照圓心到最遠端的距離

尺寸大小
- closest-side circle 最近邊
- farthest-side circle 最遠邊
- closest-corner 最近角
- farthest-corner 最遠角

at 設置圓心
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);

重複的徑向漸變 background-image: repeating-radial-gradient(red 0%, olive 25%);
- background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);

相關標籤/搜索

每日一句

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