【玩转CSS】渐变色

一、线性渐变
        线性渐变使用linear-gradient,语法如下:

        background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);
        渐变方向有以下几种值:

        使用表示方位的单词
                to top 表示从下往上的方式进行渐变
                to bottom 表示从上往下的方式进行渐变
                to right 表示从左往右的方式进行渐变
                to left 表示从右往左的方式进行渐变
                to top left 表示从右下向左上进行渐变(top和left可以交换位置,下同)
                to top right 表示从左下向右上进行渐变
                to bottom left 表示从右上向左下进行渐变
                to bottom right 表示从左上向右下进行渐变
                使用角度表示,例如0deg等同于to top, 90deg等同于to right
                使用弧度,单位为rad
                使用turn,代表环绕圆圈的圈数,0.5turn表示半圈,也就是180deg
                使用grad,表示百分度,400grad表示360deg

二、径向渐变 

同线性渐变

只是效果从中间往边缘

猜你喜欢

转载自blog.csdn.net/weixin_62255399/article/details/126544612