CSS3圆角
border-radius
一个最多可以指定四个border-*-radius属性的复合属性,这个属性允许你为元素添加圆角边框
语法
border-radius: 1-4 length | %;
兼容性
IE9+, Firefox4+, Safari5+
border-radius: 10px; //四个圆角值相同
border-radius: 5px 5px; //左上和右下、右上和左下
border-radius: 5px 5px 5px; //左上、右上和左下、右下
border-radius: 5px 5px 5px 5px; //左上、右上、右下、左下
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
CSS3盒阴影
box-shadow
可以设置多个下拉阴影的框
语法
box-shadow: h-shadow v-shadow [blur spread color inset];
- h-shadow : 必须，水平方向偏移距离
- v-shadow : 必须，垂直方向偏移距离
- blur : 可选，模糊距离
- spread : 可选，扩展距离
- color : 可选，阴影颜色
- inset : 可选，外阴影/内阴影
兼容性
IE9+, Firefox4+, Safari5+
.box{ box-shadow: 10px 10px; }
.box{ box-shadow: 10px 10px black; }
.box{ box-shadow: 50px 50px 5px black; }
.box{ box-shadow: 50px 50px 50px 5px black; }
.box{ box-shadow: 10px 10px 50px 20px pink inset; }
CSS3边界图片
border-image
使用border-image-*来构建美丽的可扩展按钮
语法
border-image: source slice width outset repeat;
- source : 边框图片路径
- slice : 图像边框向内偏移
- width : 图像边框的宽度
- outset : 边框图像区域超出边框的量
- repeat : 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
五个值：
stretch(默认) | round | repeat | initial | inherit
兼容性
IE和Opera不兼容, Firefox, Safari6+, Chrome兼容
.box{ border-image:url(border.png) 30 30 round; }
.box{ border-image:url(border.png) 30 30 stretch; }