注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

CSS兼容性系列之圆角边框  

来自王利蓉   2013-02-26 16:55:34|  分类: 默认分类 |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS真可谓是十年磨一剑,从10年前就开始孕育,到今天逐渐引人注目,前端的工作者等待了太长的时间。

CSS的支持上,谷歌的Chrome和苹果的Safari走在最前列,OperaFirefox奋力紧追,IE也放下偏执,从IE9开始发力,逐步投身到CSS的怀抱之中,当然,各个浏览器支持CSS的参差不齐,作为web产品测试人员,我们同样需要了解CSS在各个浏览器的表现形式,从而更有助于我们的测试工作。

1.圆角边框

圆角边框在各个产品下应用的比较广泛,但是在各个浏览器的表现形式也不一样,下边是lofter产品中的两张图片,如下图:

CSS兼容性系列之圆角边框 - 王利蓉 - 懿轩阁BLOG

1.1 Chrome浏览器显示效果

CSS兼容性系列之圆角边框 - 王利蓉 - 懿轩阁BLOG
1.2 IE7浏览器显示效果

圆角边框:Border-radius

语法:

border-radius :none | <length>{1,4} [ / <length>{1,4} ]?

相关属性:

border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值:

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。

border-top-left-radius:由浮点数字和单位标识符组成的长度值。不可为负值。

说明:

第一个值是水平半径。

如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。

如果任意一个值为0,则这个角是矩形,不会是圆的。

值不允许是负值。

兼容性:


CSS兼容性系列之圆角边框 - 王利蓉 - 懿轩阁BLOG

代码:

<html>

<head>

<title>Border-radius</title>

</head>

<body>

<div style="border-width:1px; border-style:solid; -moz-border-radius:11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px;border-radius: 11px;padding:5px;">FirefoxSafari 3的浏览器里能看到圆角效果

</div>

</body>

</html>  


 示例:

CSS兼容性系列之圆角边框 - 王利蓉 - 懿轩阁BLOG
  评论这张
 
阅读(1031)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016