css3 radial gradient 径向渐变

理解径向渐变CSS代码

最新推荐文章于 2024-05-08 16:09:38 发布

weixin_30815427

最新推荐文章于 2024-05-08 16:09:38 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ldcwhu/archive/2013/06/08/3125482.html

本文详细解释了CSS中径向渐变的使用方法，包括-moz-radial-gradient属性的作用，以及如何设置开始和结束颜色，通过实例展示在Firefox浏览器下的应用效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>眨眼</title>
<style>
body{
	background:#e8e8e8;
	font:Helvetica, Arial, sans-serif;
	font-size:9px;
	color:#000;
}
#content{
	position:absolute;
	top:50%;
	left:50%;
	background-color:green;
	width:960px;
	padding:200px 0;
	margin:-300px -480px;
	
	background: -moz-radial-gradient(center, circle contain, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	
}
</style>
</head>
<body>
<div id="content">

</div>
</body>
</html>

请在firefox下运行这段代码。举这个例子主要是为了解释其中的一段css代码：

background: -moz-radial-gradient(center, circle contain, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);

-moz-radial-gradient(针对火狐的径向渐变)

center：开始位置是在中间

circle contain：指定圆形的径向渐变且径向渐变的长度是从圆心到离圆心最近的点。

rgba(255,255,255,1) 0%：开始点的颜色是rgba(255,255,255,1)，即不透明度为1的白色，开始位置为径向长度的0%处。

rgba(255,255,255,0) 100%：结束点的颜色是rgba(255,255,255,0)，即不透明度为0的白色，结束位置为径向长度的100%处。

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape>：circle | ellipse

<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

<shape-size>：<length> | <percentage>

<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<position>
<percentage>①：
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①：
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：
设置左边为径向渐变圆心的横坐标值。
center①：
设置中间为径向渐变圆心的横坐标值。
right：
设置右边为径向渐变圆心的横坐标值。
<percentage>②：
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②：
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：
设置顶部为径向渐变圆心的纵坐标值。
center②：
设置中间为径向渐变圆心的纵坐标值。
bottom：
设置底部为径向渐变圆心的纵坐标值。
<color-stop>：
指定渐变的起止颜色。
<shape>
circle：
指定圆形的径向渐变
ellipse：
指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值
<size>
closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain：
包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover：
覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
<shape-size>
写本文档时Firefox尚不支持<shape-size>
<percentage>：
用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>：
用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<color-stop>
<color>：
指定颜色。请参阅颜色值
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。