CSS3边框与圆角

欢迎访问的我的个人博客http://liubofeng.com/

CSS3 圆角

border-radius 属性

一个最多可指定四个border -*- radius属性的复合属性，这个属性允许你为元素添加圆角边框！
语法：
border-radius: 1-4 length|% / 1-4 length|%;
兼容性
IE9+、FireFox4+、Chrome、Safari5+、Opera

border-radius: 10%;

CSS3 指定每个圆角

多值
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
属性：
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;
兼容性
IE9+、FireFox4+、Chrome、Safari5+、Opera

box-shadow: 50px 30px 0px 0px yellow;
//各参数从左至右依次是：水平阴影的位置；垂直阴影的位置；模糊距离；阴影的尺寸；阴影颜色

CSS3 边界图片

border-image 属性

使用border-image-*属性来构建美丽的可扩展按钮
语法
border-image: source slice width outset repeat;
兼容性
IE不兼容、FireFox、Chrome、Safari6+、Opera不兼容

border-image-source 属性

border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
语法
border-image-source: none|image;

border-image-slice 属性

border-image -slice属性指定图像的边界向内偏移
语法
border-image-slice: number|%|fill;

值	描述
number	数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
%	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
fill

保留边框图像的中间部分。

border-image-width 属性

border-image -width属性指定图像边界的宽度
语法
border-image-width: number|%|auto;

值	描述
number	表示相应的border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的image slice的内在宽度或高度

border-image-outset 属性

border-image-outset用于指定在边框外部绘制 border-image-area 的量
语法
border-image-outset: length|number;

值	描述
length	设置边框图像与边框（border-image）的距离，默认为0。
number	代表相应的 border-width 的倍数

border-image-repeat属性

该属性用于图像边界是否应重复，拉伸，铺满
语法：
border-image-repeat:stretch/repeat/round/initial/inherit

值	描述
stretch	默认值。拉伸图像来填充区域
repeat	平铺（repeated）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
initial	将此属性设置为默认值。
inherit	从父元素中继承该属性。