CSS3特效之渐变:linear-gradient

最新推荐文章于 2025-06-02 09:30:00 发布

抱猫睡觉的鱼

最新推荐文章于 2025-06-02 09:30:00 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-CSS

本文链接：https://blog.youkuaiyun.com/lmenglove/article/details/8769248

前端-CSS 专栏收录该内容

15 篇文章

订阅专栏

linear-gradient

语法

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?

说明

<point>可取如下值
	left：设置左边为渐变起点的横坐标值。
	right：设置右边为渐变起点的横坐标值。
	top：设置顶部为渐变起点的纵坐标值。
	bottom：设置底部为渐变起点的纵坐标值。
<angle>：
	用角度值指定渐变的方向（或角度）。
<color-stop>：
	指定渐变的起止颜色。

从上到下

.top-bottom{ 
	background:-moz-linear-gradient(top, #e97e00, #f80200);
	background:-webkit-linear-gradient:(top, #e97e00, #f80200); 
	background:linear-gradient:(top, #e97e00, #f80200);
	float:left;
}

从左到右

.left-right{ 
	background:-moz-linear-gradient(left, #e97e00, #f80200);
	background:-webkit-linear-gradient:(left, #e97e00, #f80200); 
	background:linear-gradient:(left, #e97e00, #f80200);
}

沿45度方向渐变

.topleft{ 
	background:-moz-linear-gradient(45deg, #e97e00, #f80200);
	background:-webkit-linear-gradient:(45deg, #e97e00, #f80200); 
	background:linear-gradient:(45deg, #e97e00, #f80200);
}