css3之線性漸變

阿新 • • 發佈：2019-02-09

漸變影象

線性漸變linear-gradient() 第一個引數: 可不寫, 預設值為to bottom (即180%), 用來指定漸變的方向, 可是是具體的角度值, 也可以直接指定方位to left/ to right/ to top/ to bottom。

為實現漸變, 還需要至少定義兩個顏色結點, 每個顏色節點可由兩個引數組成, [顏色值位置值, 顏色值位置值, …], 其中顏色值為必填項, 位置值可為長度, 也可以是百分比, 非必填項。

如: linear-gradient(red 30%, blue 80%); 表示: 容器頂部30%的區域被填充為紅色實色, 容器中間50%的高度區域被填充為從紅色到藍色的漸變色, 容器底部20%區域被填充為藍色實色。

各個引數之間只用逗號分隔。

實現簡單的漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>線性漸變實驗一</title 
>
    <style>
        div{
            margin:50px 20px;
            width:180px;
            height:100px;
            float:left;
            text-align: center;
            line-height:100px;
            color:white;
        }
        .gradient_1{
            background:linear-gradient(red, blue) 
;
        }
        .gradient_2{
            background:linear-gradient(to top,red, blue);
        }
        .gradient_3{
            background:linear-gradient(to right,red, blue);
        }
        .gradient_4{
            background:linear-gradient(to left,red, blue);
            /* 只寫一個right表示起始位置是右邊，也就是從右到左 */
            /* background: -webkit-linear-gradient(right, red, blue); */
            /* background: -moz-linear-gradient(right, red, blue); */
            /* background: -o-linear-gradient(right, red, blue); */
        }
        .gradient_5{
            background:linear-gradient(to right bottom,red, blue);
        }
        .gradient_6{
            background:linear-gradient(to left top,red, blue);
        }
    </style>
</head>
<body>
    <div class="gradient_1">
        從上到下
    </div>  
    <div class="gradient_2">
        從下到上
    </div> 
    <div class="gradient_3">
        從左到右
    </div> 
    <div class="gradient_4">
        從右到左
    </div> 
    <div class="gradient_5">
        從左上角到右下角
    </div> 
    <div class="gradient_6">
        從右下角到左上角
    </div>    
</body>
</html>

各種角度實現漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>線性漸變實驗二</title>
    <style>
        div{
            margin:50px 20px;
            width:200px;
            height:100px;
            float:left;
            text-align: center;
            line-height:100px;
            color:white;
        }
        .gradient_1{
            background:linear-gradient(0deg,red, blue);
        }
        .gradient_2{
            background:linear-gradient(45deg,red, blue);
        }
        .gradient_3{
            background:linear-gradient(90deg,red, blue);
        }
        .gradient_4{
            background:linear-gradient(135deg,red, blue);
        }
        .gradient_5{
            background:linear-gradient(180deg,red, blue);
        }
        .gradient_6{
            background:linear-gradient(225deg,red, blue);
        }
        .gradient_7{
            background:linear-gradient(270deg,red, blue);
        }
        .gradient_8{
            background:linear-gradient(315deg,red, blue);
        }
        .gradient_9{
            background:linear-gradient(360deg,red, blue);
        }
    </style>
</head>
<body>
    <div class="gradient_1">
         0edeg
    </div>  
    <div class="gradient_2">
        45deg
    </div> 
    <div class="gradient_3">
        90deg
    </div> 
    <div class="gradient_4">
        135deg
    </div> 
    <div class="gradient_5">
        180deg
    </div> 
    <div class="gradient_6">
        225deg
    </div>  
    <div class="gradient_7">
         270deg
    </div> 
    <div class="gradient_8">
        315deg
    </div> 
    <div class="gradient_9">
        360deg
    </div>  
</body>
</html>

實現條紋背景

剛剛已經實現了簡單的條紋效果, 接下來實現簡單的條紋背景, 這裡需要藉助 background-size 來控制每一塊條紋背景的大小, 並且background-repeat 應該設定為repeat。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>線性漸變實驗三</title>
    <style>
        div{
            margin:50px 20px;
            width:180px;
            height:180px;
            float:left;
            text-align: center;
            line-height:180px;
            color:white;
        }
        .gradient_1{
            background:linear-gradient(red 20%, blue 80%);
            /* 漸變填充區域為容器中間40%的高度區域, 其他區域填充的顏色為實色。 */
        }
        .gradient_2{
            background:linear-gradient(red 50%, blue 50%);
        }
        .gradient_3{
            background:linear-gradient(red 33%, blue 33%,blue 66%,green 66%);
        }
        .gradient_4{
            background:linear-gradient(red 40%, blue 0);
            /* CSS影象(第三版)規範: 如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小, 則該色標的位置值會被設定為它前面所有色標位置值的最大值。 */
        }
        .gradient_5{
            background: linear-gradient(red 50%, blue 0);
            background-size: 100% 40px;
        }
        .gradient_6{
            background: linear-gradient(45deg,red 50%, blue 0);
        }
        .gradient_7{
            background: linear-gradient(45deg,red 50%, blue 0);
            background-size: 50px 50px;
        }
        .gradient_8{
            background: linear-gradient(45deg,red 25%, blue 0, blue 50%, red 0,red 75%,blue 0);
        }
        .gradient_9{
            background: linear-gradient(45deg,red 25%, blue 0, blue 50%, red 0,red 75%,blue 0);
            background-size: 50px 50px;
        }

    </style>
</head>
<body>
    <div class="gradient_1">
        有漸變顏色
    </div>  
    <div class="gradient_2">
        顏色分明
    </div> 
    <div class="gradient_3">
        三種顏色
    </div>
    <div class="gradient_4">
        佔比不一樣
    </div>  
    <div class="gradient_5">
        條紋1
    </div>
    <div class="gradient_6">
        條紋2
    </div>
    <div class="gradient_7">
        條紋3
    </div>
    <div class="gradient_8">
        條紋4
    </div> 
    <div class="gradient_9">
        條紋5
    </div>


</body>
</html>

條紋實驗

邊框缺角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>線性漸變實驗三</title>
    <style>
        div{
            margin:50px 20px;
            width:180px;
            height:180px;
            float:left;
            text-align: center;
            line-height:180px;
            color:white;
        }
        .gradient_1{
            background: linear-gradient(-125deg, #fff 15px, #58a 0);
        }
        .gradient_2{
            background: linear-gradient(125deg, #fff 15px, #58a 0), 
                        linear-gradient(-125deg, #fff 15px, #58a 0);
            background-size: 50% 100%;
            background-position: left, right;
            background-repeat: no-repeat;
        }
        .gradient_3{
            background: linear-gradient(125deg, #fff 15px, #58a 0), 
                        linear-gradient(-125deg, #fff 15px, #58a 0),
                        linear-gradient(45deg, #58a 15px, #58a 0), 
                        linear-gradient(-45deg, #fff 15px, #58a 0);
            background-size: 50% 50%;
            background-position: top left, top right, bottom left, bottom right;
            background-repeat: no-repeat;
        }

        .gradient_4{
            background: linear-gradient(125deg, #fff 15px, #58a 0), 
                        linear-gradient(-125deg, #fff 15px, #58a 0),
                        linear-gradient(45deg, #fff 15px, #58a 0), 
                        linear-gradient(-45deg, #fff 15px, #58a 0);
            background-size: 50% 50%;
            background-position: top left, top right, bottom left, bottom right;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="gradient_1">
        缺一個角
    </div>  
    <div class="gradient_2">
        缺兩個角
    </div> 
    <div class="gradient_3">
        缺三個角
    </div>
    <div class="gradient_4">
        缺四個角
    </div>  



</body>
</html>

缺角背景

css3之線性漸變

漸變影象

實現簡單的漸變

各種角度實現漸變

實現條紋背景

邊框缺角

css3之線性漸變

css3之背景漸變

css3的線性漸變

CSS3 linear-gradient線性漸變實現虛線等簡單實用圖形

Expo大作戰(三十四)--expo sdk api之LinearGradient(線性漸變)，KeepAwake（保持屏幕不休眠）,IntentLauncherAndroid,Gyroscope，

css3 線性漸變和徑向漸變

CSS3--線性漸變

深入理解CSS3 gradient斜向線性漸變

CSS3漸變(gradients)-線性漸變、徑向漸變

Android繪圖之LinearGradient線性漸變（9）

CSS3 線性漸變

CSS3 漸變線性漸變

css3漸變、線性漸變和徑向漸變

CSS3 經典教程系列：CSS3 線性漸變（linear-gradient）

css3 背景向兩側線性漸變

css3之圓角

css3之box-shadow

數據結構之線性表

數據結構與算法之----線性表

數據結構之線性表代碼實現順序存儲，鏈式存儲，靜態鏈表（選自大話數據結構）

css3之線性漸變

漸變影象

實現簡單的漸變

各種角度實現漸變

實現條紋背景

邊框缺角

相關推薦