单词

    image 图片

    gradient渐变 - 图1 n.梯度变化线、坡度、斜率、倾斜度/adj.倾斜的、步行的

    transparent 透明的、清澈的、显而易见的

    radial 放射状的、辐射状的

    ellipse 渐变 - 图2椭圆

    circle渐变 - 图3 圆形、圆圈、圆

    线性渐变

    background-image:linear-gradient(方向，颜色1，颜色2，颜色3)

    方向：方法一：默认从上到下；

    to top 从下到

    to bottom 从上到下 默认

    to right 从左到右

    to left 从右到左

    to left top 右下角到左上角

    to left bottom 右上角到左下角

    to right top 左下角到右上角

    to right bottom 左上角到右下角

    方法二：通过调节角度改变渐变方向

    0deg +为顺时针 -为逆时针

    系统默认的方向为180deg

    background-image:linear-gradient(方向，颜色1 停止位置，颜色2 停止位置，颜色3 停止位置)

    两个相邻颜色停止位置之间就是这两个颜色发生渐变的区域，

    透明颜色：transparent

    平铺渐变 background-image:repeating-linear-gradient(方向，颜色1 起始位置，颜色2 停止位置，颜色3 停止位置)

    例：background-image:repeating-linear-gradient(方向，rgba(255,0,0,0.5) 5%,blue 15%)

    这样做的会在元素块剩余空间中重复渐变；类似于下图这种效果；其中百分比也可以换成像素，也是一样的效果；起始位置到停止位置就是颜色重复平铺的区域，起始位置就是第一个色块平铺的位置，上面部分也会被充满；类似于图片的平铺；

    渐变 - 图4

    径向渐变

    background-image:radial-gradient(方向，颜色1 停止位置，颜色2 停止位置，颜色3 停止位置)

    方向

    shape size at position

    shape 渐变的形状

    ellipse 椭圆 默认

    circle 圆形

    size 渐变半径大小

    farthest-corner 最远角（默认）

    farthest-side 最远角

    closest-corner 最近角

    closest-side 最近边

    （ps：改变渐变半径为起始点到哪个点为半径例如起始点到最远角为半径）

    at position 渐变的起始点，默认第一个值是水平方向，第二个值是垂直方向，默认值是中心点，数值和百分比只写一个值默认为水平方向偏移；

    数值

    百分比 参考的是容器的宽高

    方位 left right center (水平方位) top bottom center(垂直方位)

    background-image:repeating-radial-gradient(颜色1 起始位置，颜色2 停止位置，颜色3 停止位置)

    类似于线性渐变的平铺；

    文字渐变

    和背景图片的渐变一个操作，先写一个背景颜色渐变然后在后面再加一个：

    -webkit-background-clip:text;

    background-clip：背景图片裁剪；

    text：只有文本的地方显示背景图片；