CSS3 圆角(border-radius)
作者:博客园 日期:2015-03-08 阅读量:554 次
分享到:
前缀
- -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 | × |
免责声明:本文章部分图片素材和内容素材来源于网络,仅供学习与参考,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
-
网站做301跳转过程中都会有哪些问题出现呢?
301跳转是很多网站都会遇到的问题,也是很多站长都迷茫的问题,因为在做301过程中会出现很多疑问,对于新手站长来说,这些疑问需要有人指点,需要全面了解。今天,小编特意邀请上海网站建设公司专业人士来为大家做一个详细的解答,希望大家对301跳转问题有所了解。
2015-04-19 阅读量:679次
-
商城网站建设过程中订单物流跟踪如何实现
在电商网站建设过程中很多用户都想要插入订单物流跟踪的插件,查询一个订单物流实时的进度在订单详情中显示出来,如:什么时候确认订单,发货、装车、发往目的地、派件、收货、签收等等与之相关的信息、时间、地点都会一一显示出来。
2015-04-28 阅读量:668次
-
asp.net获取文件夹大小,字节的转换 如何将B转换成GB、MB和KB
在网站建设过程,经常会遇到客户要求获取图片文件夹的大小,已控制网站的使用情况。在此优天网络www.uskys.com分享下如果获取文件夹大小的代码。
2015-03-23 阅读量:554次
-
网站建设中如何完整设置404页面
在网站建设中404页面设置现在已经成了必不可少的一步,特别对于做网站SEO而言,可有些网站虽然设置404页面,可还是会忽悠一些细节性的东西,现在上海专业网站建设公司www.uskys.com给大家详细介绍下404页面设置的必要性与一些易遗漏的细节。
2015-05-06 阅读量:567次



首页