在CSS3中，可以通过改变border的各种属性来设置border的样式，包括圆角、阴影、边框样式等等。这篇速记着重介绍了和CSS3边框相关的一些样式的设计方法，如圆角边框，边框阴影，边框粗细和样式，边框图片。

CSS3圆角边框

在CSS3中只需要使用border-radius属性就可以创建圆角边框了。例如：

div {
    border: 2px solid;
    border-radius: 25px;
}

CSS3盒阴影

在CSS3中可以使用box-shadow属性来添加阴影。例如：

div {
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.7);`
}

其中box-shadow可以选填不同属性，属性表如下：

box-shadow: (none|h-offset) (v-offset) (blur) (spread) (color) (inset|initial|inherit);

在这个属性表中，none表示无盒阴影。如果需要盒阴影，则这些属性的含义分别是：

• h-offset，第一个属性，必须，用于规定阴影的水平偏移量。
• v-offset，第二个属性，必须，用于规定阴影的垂直偏移量。
• blur，第三个属性，可选，用于规定阴影的模糊半径，数值越大模糊半径就越大，阴影的弥散效果越明显。
• spread，第四个属性，可选，用于规定阴影的扩展大小，数值越大阴影扩展越大，正值阴影扩大，负值阴影缩小。
• color，第五个属性，可选，默认是文本颜色。
• inset|initial|inherit，不常用，都可选。

CSS3边框样式

在CSS3中使用border-width来定义边框粗细，用border-style来定义边框样式。使用border-widht的实例如下：

p.wide-border-p {
    border-style: solid;
    border-width: 5px;
}

使用border-style的实例如下：

p.dotted-border-p {
    border-style: dotted;
    border-width: 2px;
}

border-style有以下多种属性值可选：

• none，默认无边框
• dotted，定义一个点线边框
• dashed，定义一个虚线边框
• solid，定义实线边框
• double，定义两个边框。两个边框的宽度和border-width的值相同
• groove，定义3D沟槽边框。效果取决于边框的颜色值
• ridge，定义3D脊边框。效果取决于边框的颜色值
• inset，定义一个3D的嵌入边框。效果取决于边框的颜色值
• outset，定义一个3D突出边框。效果取决于边框的颜色值

CSS3边界图片

使用CSS3的border-image属性，可以使用图像创建一个边框。例如：

div {
    border-image: url(border.png) 30 30 round;
    -webkit-border-image: url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image: url(border.png) 30 30 round; /* Opera */
}