如何使用CSS设置DIV边框样式？

要设置DIV的边框样式，可以使用CSS的border属性。其语法如下：

    div {
        border: 边框宽度 边框样式 边框颜色;
    }
    

其中，border-width表示边框宽度（单位可以是px、em等），border-style表示边框样式（如solid、dashed等），border-color表示边框颜色（可以是具体颜色值，也可以是颜色名称）。

下面的例子展示了如何添加一条红色实线边框：

    div {
        border: 1px solid red;
    }
    

除了基本设置之外，还可以使用border-radius属性来设置DIV的圆角边框。其语法如下：

    div {
        border-radius: 单个值 / 横向值 纵向值;
    }
    

其中，单个值表示四个角的圆角半径相同，横向值和纵向值分别表示左上角和右下角、左下角和右上角的圆角半径。

下面的例子展示了如何添加一个左上角和右下角圆角为30px的DIV：

    div {
        border: 1px solid red;
        border-radius: 30px 0 30px 0;
    }
    

如果想要给DIV添加阴影效果，可以使用box-shadow属性。其语法如下：

    div {
        box-shadow: 横向位移 纵向位移 模糊距离 阴影尺寸 阴影颜色;
    }
    

其中，横向位移和纵向位移表示阴影距离DIV的水平和垂直距离，模糊距离表示阴影的模糊程度，阴影尺寸表示阴影的大小范围，阴影颜色表示阴影的颜色。

下面的例子展示了如何添加一个水平位移为10px、垂直位移为10px、模糊距离为5px、阴影尺寸为10px和颜色为灰色的DIV阴影效果：

    div {
        border: 1px solid red;
        box-shadow: 10px 10px 5px 10px grey;
    }
    

在设置边框样式时，除了常用的实线边框之外，还有多种边框样式可供选择。下面介绍常见的几种样式。

• solid：实线边框，这也是默认值。

• dotted：点状边框。

• dashed：虚线边框。

• double：双线边框。

• groove：凹槽边框。

• ridge：垄状边框。

• inset：内阴影边框。

• outset：外阴影边框。

下面的例子展示了如何设置一个点状边框：

    div {
        border: 2px dotted blue;
    }