CSS3学习:线性渐变(linear-gradient)

CSS3学习:线性渐变(linear-gradient)

在切一块很大的渐变背景图时,突然想为啥不试试用css3来实现,撇开兼容问题开始学习这个有趣的css3属性。于是分别在MDCSRL找到了对应的文档,结果出乎预料的发现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

Votre adresse e-mail ne sera pas publiée.