CSS的取值radial-gradient()_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
2
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 1671 | 回复: 1   主题: CSS的取值radial-gradient()        下一篇 
blackTrc
注册用户
等级:少校
经验:853
发帖:13
精华:0
注册:2015-4-28
状态:离线
发送短消息息给blackTrc 加好友    发送短消息息给blackTrc 发消息
发表于: IP:您无权察看 2016-1-29 9:49:46 | [全部帖] [楼主帖] 楼主

语法结构:

<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>:用百分比指定起止色位置。 
浏览器支持:
主流浏览器都支持此属性。
1.IE9和IE9以下浏览器不支持此属性。
2.Opera11.60以下不支持此属性。
3.IE以外浏览器都需要使用各自的浏览器兼容写法。


实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:200px;
  height:100px;
  margin-top:10px;
  border:1px solid #ddd;
}
.test{
  background:-moz-radial-gradient(center center, circle, #f00, #ff0, #080);
  background:-webkit-radial-gradient(center center, circle, #f00, #ff0, #080);
  background:-o-radial-gradient(center center, circle, #f00, #ff0, #080);
  background:-ms-radial-gradient(center center, circle, #f00, #ff0, #080);
  background:radial-gradient(center center, circle, #f00, #ff0, #080);
}
.test2{
  background:-moz-radial-gradient(circle contain, #f00, #ff0, #080);
  background:-webkit-radial-gradient(circle contain, #f00, #ff0, #080);
  background:-o-radial-gradient(circle contain, #f00, #ff0, #080);
  background:-ms-radial-gradient(circle contain, #f00, #ff0, #080);
  background:radial-gradient(circle contain, #f00, #ff0, #080);
}
.test3{
  background:-moz-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
  background:-webkit-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
  background:-o-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
  background:-ms-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
  background:radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);
}
.test4{
  background:-moz-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
  background:-webkit-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
  background:-o-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
  background:-ms-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
  background:radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>



66.jpg



赞(0)    操作        顶端 
blackTrc
注册用户
等级:少校
经验:853
发帖:13
精华:0
注册:2015-4-28
状态:离线
发送短消息息给blackTrc 加好友    发送短消息息给blackTrc 发消息
发表于: IP:您无权察看 2016-1-29 9:52:45 | [全部帖] [楼主帖] 2  楼

这个属性的写法有些复杂,还是要多加练习了


66.jpg



赞(0)    操作        顶端 
总帖数
2
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论