HTML5复习 (8)

CSS3边框与圆角

一、圆角

border-radius:四个值  左上，右上，右下，左下。

border-radius:三个值  左上，右上和左下，右下。

border-radius:两个值  左上和右下，右上和左下。

写一个数字就是四个圆角值相同。

border-top-left-radius  左上

border-top-right-radius   右上

border-bottom-left-radius  左下

border-bottom-right-radius  右下

写百分数相对于宽，高的百分比。比如一个长方形的DIV写border-radius：50%; 就是一个椭圆形。

二、盒阴影

box-shadow:h-shadow  v-shadow blur spread color inset;

分别是 水平偏移（正右负左）  竖直偏移（正下负上） 模糊度 扩展 颜色 外/内阴影

三、CSS3边界图片

border-image:source slice width outset repeat;

分别是  url()   指定图像边界向内偏移多少（百分比、值或fill）  边界的宽度（数值或者百分比） 

             用于指定在边框外部绘制 border-image-area 的量（写数字不带单位是倍数关系）

             是否重复 （stretch repeat round initial inherit）