用CSS3写圆角(超简单)

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

用CSS3写圆角(超简单)前缀:

-moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome。

CSS3圆角(所有的)

使用CSS3,我们可以用几行代码来创建圆角。

这是一个5px普通边框和15px边框半径的设置:

#roundCorderC{font-family: Arial;border: 5px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px;padding: 15px 25px;height: inherit;width: 590px;}

浏览器支持:

√ Firefox(3.05+…)√ Google Chrome(1.0.154+…)√ Google Chrome(2.0.156+…)× Internet Explorer(IE7, IE8)× Opera 9.6√ Safari(3.2.1+ windows)CSS3圆角(个别的)

当然,一个DIV的四个角不需要全部都是圆角,你可以个别的实现圆角。

#roundCornerI{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius-topleft: 15px; -moz-border-radius-toPRight: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; padding: 15x 25px; height: inherit; width: 590px;}

浏览器支持:

√ Firefox(3.05+…)√ Google Chrome(1.0.154+…)√ Google Chrome(2.0.156+…)× Internet Explorer(IE7, IE8)× Opera 9.6√ Safari(3.2.1+ windows)

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航