CSS3 圆角(border-radius)
作者:博客园 日期:2015-03-08 阅读量:491 次
分享到:
前缀
- -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 | × |
免责声明:本文章部分图片素材和内容素材来源于网络,仅供学习与参考,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
-
网站建设过程中ajax请求防止钓鱼的方法
网站建设过程为了加强用户体验,网站互动效果很多,多数都采用ajax异步提交的方法,因为这样既减少了网站的负载,还不会出现页面刷新跳转的现象,增加用户的体验度。可很多黑客或不良竞争者就会通过ajax页面进行攻击,不间断的请求和添加数据进入我们的服务器,现在上海网站建设公司www.uskys.com分享下,ajax如何防止钓鱼的方法。
2015-04-25 阅读量:607次
-
asp.net c# 网站建设中发送邮件的方法
在网站建设过程中会用到发送邮件的地方很多,比如在线留言,用户注册都会用发送邮件来做提醒和验证。下面上海网站建设公司优冉科技给大家介绍下,在asp.net c#下发送邮件实现的方法。
2015-05-04 阅读量:494次
-
网站建设前端工程师应该掌握哪些技术和技巧?
网站建设前端开发工程师不仅仅需要掌握HTML+CSS,JS,JQUERY等技术,还需要长去了解和积累各种主流的浏览器兼容问题和经验并迅速解决,熟悉各种框架,建设一个易于网站推广SEO的网站界面。
2015-04-25 阅读量:574次
-
使用HTML5实现多文件上传
在Dojo1.6中有一个崭新的Multi-File Uploader (dojox.form.Uploader),它具有一个可定制样式的file input按钮,可使用多文件选择模式,且完全基于HTML元素。在不支持HTML5的浏览器中,该控件可以自动切换到使用Flash或者iframe。
2015-03-08 阅读量:661次