CSS3 圆角(border-radius)
前缀
- -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 | × |
免责声明:本文章部分图片素材和内容素材来源于网络,仅供学习与参考,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
-
大型网站sql语句生成数据字典
在大型网站建设后期,企业一般都会要求要“数据库字典”,下面优冉科技技术分享下sql语句生成数据字典方法如下:SELECT 表名=case when a.colorder=1 then d.name else '' end, 表说明=case when a.colorder=1 then isnull(f.value,'') else '' end, 字段序号=a.colorder,
阅读量:809次
-
大型网站建设中大文件上传组件Brettle.Web.NeatUpload.dll
在网站建设中时常遇到大文件及大视频的上传麻烦困难需要通过FTP来上传,现在上海网站建设公司www.uskys.com网站建设人员给大家分享一款免费,开源用于大型网站建设或平台门户网站建设中大文件上传组件 NeatUpload。
阅读量:757次
-
HTML5都有哪些功能?
HTML5都有哪些功能?
阅读量:767次
-
使用HTML5实现多文件上传
在Dojo1.6中有一个崭新的Multi-File Uploader (dojox.form.Uploader),它具有一个可定制样式的file input按钮,可使用多文件选择模式,且完全基于HTML元素。在不支持HTML5的浏览器中,该控件可以自动切换到使用Flash或者iframe。
阅读量:870次
© 2024优天建站有限公司,保留所有权利 皖ICP备2022011316号-1 公安部备案号



首页