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

最新推荐文章于 2021-07-02 02:36:47 发布

熟悉的新风景

最新推荐文章于 2021-07-02 02:36:47 发布

阅读量1k

点赞数

分类专栏： # HTML与css

本文链接：https://blog.csdn.net/weixin_44797182/article/details/102535193

版权

HTML与css 专栏收录该内容

26 篇文章 4 订阅

订阅专栏

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

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

线性渐变

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（参数值）

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