html基礎之渐变属性（斑马线）

朱雀 2023-06-07 05:57 16阅读 0赞

本篇简单的介绍一下渐变属性，因为最近用到比较多

渐变属性分为两个：线性渐变和径向渐变，下面简单的介绍一下

### 线性渐变 ###

#### background-image:linear-gradient（渐变角度，颜色值1 n%，颜色值2 n%…）; ####

起始颜色会沿一条直线过渡到结束色，各颜色之间用“，”隔开。每个颜色值后可以加一个百分比数值，用以标明颜色渐变的位置 （可不写）

**渐变角度** ：指水平线和渐变线之间的角度，也可用英语表示， **默认为 180deg** ，按照下面实例，渐变颜色为红，黄，蓝从上到下依次排列  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]  
实例如下：

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);
    			}

![20191013173626521.PNG][] ![20191013173632868.PNG][] ![20191013173635533.PNG][] ![2019101317363845.PNG][]

![在这里插入图片描述][20191014083950723.PNG]

### 径向渐变 ###

#### 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);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3][]

### 重复线性渐变 ###

#### background-image:repeating-linear-gradient（渐变角度，颜色值1，颜色值2…）; ####

括号内的参数取值与线性渐变相同，分别用于定义渐变角度和颜色值，需要注意的是不添加范围的话和线性渐变相同

background: repeating-linear-gradient(45deg,red 50px,yellow 150px);

![在这里插入图片描述][20191013181655649.PNG]

### 重复径向渐变 ###

#### background-image：repeating-radial-gradient（参数值） ####

括号内的参数取值与径性渐变相同，分别用于定义渐变形状，圆心位置和颜色值，但是一般需要添加范围 ，不然很怪异

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20230601/b9bb8992c06f4e09a1a7882ed3f52c7c.png
[20191013173626521.PNG]: https://img-blog.csdnimg.cn/20191013173626521.PNG
[20191013173632868.PNG]: https://img-blog.csdnimg.cn/20191013173632868.PNG
[20191013173635533.PNG]: https://img-blog.csdnimg.cn/20191013173635533.PNG
[2019101317363845.PNG]: /images/20230601/e907cac720124c32b46dee0393554a87.png
[20191014083950723.PNG]: /images/20230601/59e87cbc804e4708a2463c2e333becfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191013180352575.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191013180357772.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3]: /images/20230601/44f4434cd9f84e6bbc8424ebf970454d.png
[20191013181655649.PNG]: /images/20230601/c8c3e7cf28544856917e9aea5506899a.png