这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,如今CSS3已经html
能够轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端web
浏览器。浏览器
咱们这样去定义一个盒子模型:spa
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;
在Firefox,和Chrome中的效果:htm
其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-blog
radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。it
咱们也能够分别设置4个圆角的属性值,例如这样的样式:class
-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;
获得的效果以下图:webkit
咱们还能够使用CSS缩写样式实现圆角效果,例以下面的代码:im
-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时将失效