css3之线性渐变

最新推荐文章于 2024-09-19 16:37:46 发布

天空影

最新推荐文章于 2024-09-19 16:37:46 发布

阅读量3.7k

点赞数 1

分类专栏：大前端-html/css 文章标签： css3

本文链接：https://blog.csdn.net/jx950915/article/details/78987846

版权

大前端-html/css 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

渐变图像

线性渐变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>