CSS3 圆角(border-radius)
作者:博客园 日期:2015-03-08 阅读量:507 次
分享到:
前缀
- -moz(例如 -moz-border-radius)用于Firefox
- -webkit(例如:-webkit-border-radius)用于Safari和Chrome。
例1
<div id="round"></div> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ }
效果:
例2:无边框
<div id="round"></div> #round { padding:10px; width:300px; height:50px; background:#FC9; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; }
效果:
书写顺序
/* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius:10px;
其它
支持上、右、下、左
border-radius:5px 15px 20px 25px;
支持拆分书写
/* Gecko browsers */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 20px; /* Webkit browsers */ -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 20px; /* W3C syntax */ border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 20px;
支持性
浏览器 | 支持性 |
---|---|
Firefox(2、3+) | √ |
Google Chrome(1.0.154+…) | √ |
Google Chrome(2.0.156+…) | √ |
Safari(3.2.1+ windows) | √ |
Internet Explorer(IE7, IE8) | × |
Opera 9.6 | × |
免责声明:本文章部分图片素材和内容素材来源于网络,仅供学习与参考,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
-
HTML5都有哪些功能?
HTML5都有哪些功能?
2015-03-08 阅读量:596次
-
网站建设前端工程师应该掌握哪些技术和技巧?
网站建设前端开发工程师不仅仅需要掌握HTML+CSS,JS,JQUERY等技术,还需要长去了解和积累各种主流的浏览器兼容问题和经验并迅速解决,熟悉各种框架,建设一个易于网站推广SEO的网站界面。
2015-04-25 阅读量:600次
-
网站做301跳转过程中都会有哪些问题出现呢?
301跳转是很多网站都会遇到的问题,也是很多站长都迷茫的问题,因为在做301过程中会出现很多疑问,对于新手站长来说,这些疑问需要有人指点,需要全面了解。今天,小编特意邀请上海网站建设公司专业人士来为大家做一个详细的解答,希望大家对301跳转问题有所了解。
2015-04-19 阅读量:602次
-
网站建设过程中ajax请求防止钓鱼的方法
网站建设过程为了加强用户体验,网站互动效果很多,多数都采用ajax异步提交的方法,因为这样既减少了网站的负载,还不会出现页面刷新跳转的现象,增加用户的体验度。可很多黑客或不良竞争者就会通过ajax页面进行攻击,不间断的请求和添加数据进入我们的服务器,现在上海网站建设公司www.uskys.com分享下,ajax如何防止钓鱼的方法。
2015-04-25 阅读量:647次