CSS3学习：线性渐变（linear-gradient）

在切一块很大的渐变背景图时，突然想为啥不试试用css3来实现，撇开兼容问题开始学习这个有趣的css3属性。于是分别在MDC和SRL找到了对应的文档，结果出乎预料的发现Gecko和webkit的实现方式竟然不一样，按以往的经验这两个的写法应该只是-moz和-webkit开头的区别（webkit已经更新了语法），分别来看下这个属性的两种写法：

对Gecko内核浏览器：
-moz-linear-gradient([point || angle,]? stop, stop [, stop]*)
对webkit内核浏览器：
-webkit-gradient(type, start_point, end_point [, stop]*)

看上去有点复杂，让我们来逐个分解，先从Gecko的开始。

-moz-linear-gradient
point是用来指定渐变起始点的，它的值和background-position的值是一样，它可以是百分比，像素值或“left”、“right”、“top”与“bottom”等。
angle是用来指定渐变的角度。
stop必须指定起始和结束的渐变颜色，颜色值后可以设置渐变结束位置，两者以空格隔开。

-webkit-gradient
type指定渐变类型，目前有两个值：linear和radial，本文讨论的是线性渐变，使用linear。
start_point和end_point用来指定渐变起始点和终点坐标。
stop用来指定渐变颜色。

请在firefox3.6+，safari4+或chrome4+运行下面的实例，才能看到效果。如果考虑到兼容性问题，在不用图片的前提下，你可以开头设置一个纯色的背景代替，这样不会太影响整体设计的美观。当然虽然IE有滤镜filter: progid:DXImageTransform.Microsoft.Gradient()可以实现，但不推荐。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hi,丸子</title>
<style type="text/css">
body{
	background:#8ec1da -webkit-gradient(linear, 0 0, 0 900, from(#C9E3EF), to(#8ec1da)) no-repeat;
	background:#8ec1da -moz-linear-gradient(center top, #C9E3EF, #8ec1da 900px) no-repeat;
	height:900px;
}
</style>
</head>
<body>
</body>
</html>

Laisser un commentaire Annuler la réponse