html基礎之渐变属性(斑马线)
本篇简单的介绍一下渐变属性,因为最近用到比较多
渐变属性分为两个:线性渐变和径向渐变,下面简单的介绍一下
线性渐变
background-image:linear-gradient(渐变角度,颜色值1 n%,颜色值2 n%…);
起始颜色会沿一条直线过渡到结束色,各颜色之间用“,”隔开。每个颜色值后可以加一个百分比数值,用以标明颜色渐变的位置 (可不写)
渐变角度 :指水平线和渐变线之间的角度,也可用英语表示, 默认为 180deg ,按照下面实例,渐变颜色为红,黄,蓝从上到下依次排列
实例如下:
div{
width: 300px;
height: 100px;
/* background: linear-gradient(0deg ,red 30%,yellow 60%,blue); */
/* background: linear-gradient(90deg ,red 30%,yellow 60%,blue); */
/* background: linear-gradient(45deg ,red 30%,yellow 60%,blue); */
background: linear-gradient(0deg ,red ,yellow ,blue);
斑马线的做法
background: linear-gradient(45deg,red 25%,blue 0,blue 50%,
red 0,red 75%,blue 0);
}
径向渐变
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…);
起始颜色会从一个中心点开始,依据椭圆或圆形进行扩张渐变 。每个颜色 值后可以加一个百分比数值,用以标明颜色渐变的位置 (可不写)
渐变形状: 定义径向渐变的形状,可以是定义水平和垂直半径的像素值或百分比,或相应的关键词
- 像素值/百分比 定义形状的水平和垂直半径
- circle 指定圆形的径向渐变
- ellipse 指定椭圆形的径向渐变(默认)
圆心位置: 确定元素渐变的中心位置,省略的话默认为center
代码实例如下,很多和线性渐变相同,就不在重复了;
background: radial-gradient(red ,yellow ,blue);
background: radial-gradient(circle,red ,yellow ,blue);
background: radial-gradient(200px 300px,red ,yellow ,blue);
设置圆心的位置
background: repeating-radial-gradient(circle at 10% 10%,red ,yellow ,blue);
重复线性渐变
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2…);
括号内的参数取值与线性渐变相同,分别用于定义渐变角度和颜色值,需要注意的是不添加范围的话和线性渐变相同
background: repeating-linear-gradient(45deg,red 50px,yellow 150px);
重复径向渐变
background-image:repeating-radial-gradient(参数值)
括号内的参数取值与径性渐变相同,分别用于定义渐变形状,圆心位置和颜色值,但是一般需要添加范围 ,不然很怪异