CSS3边框

border-radius

• 定义：

border-radius属性是一个简写属性，用于设置四个border-*-radius 属性；该属性允许为元素添加圆角边框；

• 兼容性：

CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。
-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius

• 属性：

border-radius属性其实可以分为四个其他的属性：
border-radius-top-left //左上角
border-radius-top-right //右上角
border-radius-bottom-right //右下角
border-radius-bottom-left //左下角
//提示：按顺时针方式

• 写法：

border-radius: 1-4 length|% / 1-4 length|%;
//斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径

• 实例

• 实现一个圆形

• 代码

• 效果

圆

• 实现一个椭圆

• 代码

• 效果

椭圆

实现一个扇形

• 代码

• 效果

扇形

border-image

• 语法

border-image: source slice width outset repeat|initial|inherit;

• 属性

border-image 属性是一个简写属性，用于设置以下属性：

• border-image-source:用在边框的图片的路径；

• border-image-slice:图片边框向内偏移；
• border-image-width:图片边框的宽度;
• border-image-outset:边框图像区域超出边框的量;
• border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched);
• 小栗子

border-image 属性用于指定一个元素的边框图像。
在这里，图像平铺（重复），以填补该地区。
在这里，图像被拉伸以填补该地区

这是原始图片:
![](/images/border.png)
注意: Internet Explorer 10 及更早的版本不支持 border-image 属性。

• 效果

box-shadow

• 说明

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

• 语法

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

• 属性

h-shadow:必需的。水平阴影的位置。允许负值;
v-shadow:必需的。垂直阴影的位置。允许负值;
blur:可选。模糊距离;
spread:可选。阴影的大小;
color：可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表；
inset：可选。从外层的阴影（开始时）改变阴影内侧阴影；

• 小栗子

 





![](pulpitrock.jpg)
The pulpit rock in Lysefjorden, Norway.

• 效果

box-shadow