CSS3——边框与圆角

CSS3 圆角

border-radius属性

一个最多可指定四个border-radius属性的复合属性，这个属性允许为元素添加圆角边框。

语法：border-radius：1-4 length / %

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角

两个值：第一个值为左上角和右下角，第二个值为右上角和左下角

其细化属性为：border-top-left-radius     border-top-right-radius      border-bottom-right-radius       border-bottom-left-radius

 CSS3 盒阴影

box-shadow属性

box-shadow属性可以设置一个或多个下拉阴影的框

语法： box-shadow: h-shadow    (水平偏移量，必需，允许负值)

                                 v-shadow    (竖直偏移量，必需，允许负值) 

                                 blur    (可选，模糊距离)

                                 spread      ( 可选，阴影的尺寸) 

                                 color     ( 可选，阴影的颜色 )

                                 inset     (可选，将外部阴影 (outset) 改为内部阴影)

CSS3 边界图片

border-image属性

使用border-image-*属性构建可扩展按钮（复合属性）

语法：border-image:source slice width outset repeat;

border-image-source属性：指定要使用的图像，而不是由border-style属性设置的边框样式。

border-image-slice属性：指定图像的边界向内偏移。  border-image-slice：number / % / fill；

border-image-width属性：指定图像边界的宽度。   border-image-width：number / % / auto；

border-image-outset属性：指定在边框外部绘制border-image-area的量。   border-image-outset：length / number；

border-image-repeat属性：图像边界是否应重复（repeated）、拉伸I（stretched）、或铺满（rounded）。                                                 border-image-repeat：stretch / repeat / round / initial / inherit；