22 css渐变

渐变

渐变，至少IE10支持
渐变也是一个背景图

一、linear-gradient 设置线性渐变

background:linear-gradient(to 方向，颜色 开始渐变的位置，颜色 开始渐变的位置…)

里面的参数

1. to 方向，方向可以使用具体的方向单词，可以使用角度度数
2. 如果是度数，则直接写具体角度，不需要加to deg是度数单位

• 正值：顺时针旋转
  • 0 -> 向上
  • 90 -> 向右
  • 180 -> 向下
• 负值：逆时针旋转

开始渐变的位置，可以是具体的数值，也可以是百分比

.case{
    height: 100px;
    background: linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,#04be02 20%,#04be02 100%) repeat-x;
    background-size: 20px 20px;
        }

radial-gradient 设置径向渐变

radial-gradient (半径 形状 at 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置…)

形状的可选值：

1. circle 圆形，默认值，可以省略
2. ellipse 椭圆

半径可以是具体的数值，也可以是如下系统给定的值：

1. farthest-corner 最远角
2. closest-corner 最近角
3. farthest-side 最远边
4. closest-side 最近边

圆心的设置：

1. 可以是具体的数值，第一个数值代表x轴方向，第二个数值代表y轴方向
2. 可以是 left top right bottom center 等方向名词的组合

渐变的开始位置：

1. 可以是具体的数值
2. 可以是百分比，百分比是以半径长度为基准

.wp2{
    background: radial-gradient(100px at 0px 100px,#f00 0%,#0f0 50%,#ff0 100%);
}
.wp3{
    background: radial-gradient(farthest-corner at 20px 30px,#f00 0%,#0f0 50%,#ff0 100%);
}
.wp4{
    background: radial-gradient(closest-corner at 20px 30px,#f00 0%,#0f0 50%,#ff0 100%);
}
.wp5{
    background: radial-gradient(farthest-side at 20px 30px,#f00 0%,#0f0 50%,#ff0 100%);
}
.wp6{
    background: radial-gradient(closest-side at 20px 30px,#f00 0%,#0f0 50%,#ff0 100%);
}
.wp7{
    background: radial-gradient(50px at right center,#f00 0%,#0f0 50%,#ff0 100%);
}

重复性渐变

repeating-linear-gradient 设置重复性线性渐变，设置方式和线性渐变一样，效果是自动渲染除重复的渐变内容

repeating-radial-gradient 设置重复性径向渐变，语法同径向渐变一致

设置重复性渐变需要注意

1. 需要设置重复渐变的颜色起始位置
2. 至少设置两种颜色

同背景图一致，也可以设置多组渐变,同时设置多组背景图或者渐变图，后面设置的会被前面设置的图覆盖

.rd{
    height: 100px;
    background: #000 repeating-linear-gradient(90deg,#fff 0,#fff 50px,transparent 50px,transparent 100px) repeat-x 0 center ;
    background-size:100px 20px;

}
.wp{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: repeating-radial-gradient(100px at center center,#f00 0px,#f00 10px,#0f0 10px,#0f0 20px);
}
.ai{
    width: 800px;
    height: 800px;
    border: 1px #f00 solid;
    margin: 0 auto;
    background: repeating-linear-gradient(90deg,transparent 0,transparent 10px,#000 10px,#000 20px),repeating-linear-gradient(0deg,#000 0,#000 10px,#fff 10px,#fff 20px);
}