CSS3 边框
- border-radius
- box-shadow
- border-image
Internet Explorer 9+
注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。
border-radius
border-radius: 2em 1em 5em 4em;
等价于
eg01: border-radius:2em
border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;
eg02: border-radius:2em 5em;
等价于
border-top-left-radius:2em; border-top-right-radius:5em; border-bottom-right-radius:2em; border-bottom-left-radius:5em;
eg03: border-radius:2em 5em 8rem;
等价于
border-top-left-radius:2em;border-top-right-radius:5em; border-bottom-right-radius:8em; border-bottom-left-radius:5em;
eg04: border-radius:2em 1em 5em 4rem/0.5em 3rem 2em 4em;/*以斜杠 / 分开后面的参数的意思是:第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,这样可以画一个不对称的圆角辣*/
等价于
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em; border-bottom-right-radius: 5em 2em; border-bottom-left-radius: 4em 4em;
![]()
通常我们很少写斜杠 / 右边的参数,那就是默认右边等于左边的值。你也可以省略一些值,比如这样子写
border-radius: 2em 1em 4em / 0.5em 3em;