IE9、 Firefox、Safari, Chrome的CSS3圆角属性
2024-09-26 16:51:03
这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经
可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端
浏览器。
我们这样去定义一个盒子模型:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
在Firefox,和Chrome中的效果:
其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-
radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。
我们也可以分别设置4个圆角的属性值,例如这样的样式:
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
得到的效果如下图:
我们还可以使用CSS缩写样式实现圆角效果,例如下面的代码:
-moz-border-radius: 50px 30px 20px 10px;
-webkit-border-radius:20px 10px 5px 50px;
当然我们也可以为盒子模型添加边框属性:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
border:10px solid #69F;
IE 9 没有使用私有属性,直接使用 border-radius 定义圆角,border-radius 是定义
四个角都是圆角,如果要具体的一个角,可以使用下面四个属性:
border-bottom-left-radius:5px
border-bottom-right-radius:5px
border-top-left-radius:5px
border-top-right-radius:5px
貌似当圆角数值小于4px时将失效
最新文章
- MyBatis学习(二)
- python 函数传递方式
- DOM_05之DOM、BOM常用对象
- 通过google chrome操作JavaScript中Console
- hdu1503 最长公共子序列变形
- 日期运算 jsf日期组建
- iOS - ImageCache 网络图片缓存
- LINUX 论文
- setTimeout 和 setInterval区别
- 浅谈JavaScript DOM编程艺术读后感和一点总结
- tomcat------https单向认证和双向认证
- js调用wcf 的SOA
- Linux 第十六天
- java开发面试问题
- ___Json帮助类
- Loj #2731 「JOISC 2016 Day 1」棋盘游戏
- 早期自学jQuery-二事件
- java performance tools / NetBeans Profiler / Sun BTrace / Eclipse MAT / IBM ISA
- Linux 文件系统扩展属性【转】
- 2.5 SeleniumBuilder辅助定位元素