CSS3总结——边框与圆角

CSS3圆角

border-radius （IE9+）

可以为元素添加圆角边框

语法：

border-radius : length | %

多个值

- 4个值   （左上角  右上角  右下角  左下角）

- 3个值   （左上角  右上和左下角  右下角 ）

- 2个值   （ 左上和右下角  ， 右上和左下角）

如果设置为50%，宽高不一样的情况下变椭圆，宽高一样变圆。

其他属性：

border-top-left-radius             左上角弧度

border-top-rightt-radius           右上角弧度

border-bottom-right-radius         右下角弧度

border-bottom-left-radius          左下角弧度

CSS3盒阴影

box-shadow （IE9+）

可以设置一个或多个阴影

语法：

box-shadow:  h-shadow  v-shadow  blur   spread  color  inset ;
水平       垂直    模糊    阴影大小        内部阴影

注： inset可以改为 outset（外阴影），如果不设置默认是outset。

box-shadow: 50px 30px 10px 10px yellow ;

CSS3边界图片

border-image （非IE、非Opera）

语法：

border-image:  source  slice  width  outset  repeat

source 图片路径

如： url(“border.jpg”);

slice 图片边界向内偏移

值：数值、百分比、fill。

width 图片宽度

值：数字、百分比、auto

repeat 是否重复

值：

stretch （拉伸）

round （铺满）

repeat （重复）