线性渐变与径向渐变与重复渐变

Posted 2021-01-30 lujieting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了线性渐变与径向渐变与重复渐变相关的知识，希望对你有一定的参考价值。

<style>
        /*线性渐变*/
        div{
            width: 300px;
            height: 300px;
            /*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用background*/
            /*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/
            /*方向：
            to top:0deg
            to right:90deg
            to bottom:180deg --默认值
            to left:270deg*/
            /*background: linear-gradient(to right,red,blue)*/;
            background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
        }


        /*径向渐变*/
        div{
            width: 300px;
            height: 200px;
            /*添加径向渐变：产生也是图像*/
            /*background: radial-gradient(red,blue);*/
            /*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：

            形状shape:
            circle:产生正方形的渐变色
            ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse

            at position:坐标，默认在正中心。
            可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
            大小size:
            closest-side：最近边；
            farthest-side：最远边；
            closest-corner：最近角；
            farthest-corner：最远角。默认是最远的角farthest-corner*/

            /*background: radial-gradient(circle,red,blue);*/
            /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
            /*background: radial-gradient(at left top,red,blue);*/

            /*设置颜色的位置*/
            background: radial-gradient(red,red 50%,blue 50%,blue);
        }


        /*重复渐变*/
        body{
            background-color: #ccc;
        }
        div:first-of-type{
            width: 300px;
            height: 300px;
            /*background: radial-gradient(
                    #fff 0%,#fff 10%,
                    #000 10%,#000 20%,
                    #fff 20%,#fff 30%,
                    #000 30%,#000 40%);*/
            background: repeating-radial-gradient(circle closest-side at center center,
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);
        }
        div:last-of-type{
            width: 200px;
            height: 800px;
            background: repeating-linear-gradient(45deg,
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);
        }
    </style>
</head>
<body>
<div></div>
<div></div>

以上是关于线性渐变与径向渐变与重复渐变的主要内容，如果未能解决你的问题，请参考以下文章