渐变
渐变,至少IE10支持
渐变也是一个背景图
一、linear-gradient 设置线性渐变
background:linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置…)
里面的参数
- to 方向,方向可以使用具体的方向单词,可以使用角度度数
- 如果是度数,则直接写具体角度,不需要加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 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置…)
形状的可选值:
- circle 圆形,默认值,可以省略
- ellipse 椭圆
半径可以是具体的数值,也可以是如下系统给定的值:
- farthest-corner 最远角
- closest-corner 最近角
- farthest-side 最远边
- closest-side 最近边
圆心的设置:
- 可以是具体的数值,第一个数值代表x轴方向,第二个数值代表y轴方向
- 可以是 left top right bottom center 等方向名词的组合
渐变的开始位置:
- 可以是具体的数值
- 可以是百分比,百分比是以半径长度为基准
.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 设置重复性径向渐变,语法同径向渐变一致
设置重复性渐变需要注意
- 需要设置重复渐变的颜色起始位置
- 至少设置两种颜色
同背景图一致,也可以设置多组渐变,同时设置多组背景图或者渐变图,后面设置的会被前面设置的图覆盖
.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);
}