实现不同样式效果的DIV边框

一、边框样式

边框样式可以通过CSS中的border-style属性来设置。border-style有以下几个值可选：

border-style: none;  /* 无边框 */
border-style: dotted;  /* 点线边框 */
border-style: dashed;  /* 虚线边框 */
border-style: solid;  /* 实线边框 */
border-style: double;  /* 双线边框 */
border-style: groove;  /* 3D沟槽边框 */
border-style: ridge;  /* 3D脊边框 */
border-style: inset;  /* 3D嵌入边框 */
border-style: outset;  /* 3D浮雕边框 */

例如，设置一个红色实线边框的DIV可以这样写：

div {
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

二、边框宽度

边框宽度可以通过CSS中的border-width属性来设置。border-width有以下几个值可选：

border-width: thin;  /* 细线边框 */
border-width: medium;  /* 中等线边框 */
border-width: thick;  /* 粗线边框 */
border-width: 1px;  /* 自定义像素宽度 */

例如，设置一个绿色粗线边框的DIV可以这样写：

div {
  border-style: solid;
  border-width: 5px;
  border-color: green;
}

三、圆角边框

圆角边框可以通过CSS中的border-radius属性来设置。border-radius接受一个或两个长度值，分别表示水平半径和竖直半径。

例如，设置一个红色圆角边框的DIV可以这样写：

div {
  border-style: solid;
  border-width: 1px;
  border-color: red;
  border-radius: 10px;
}

四、阴影边框

阴影边框可以通过CSS中的box-shadow属性来设置。box-shadow接受四个参数，分别为水平偏移量、竖直偏移量、模糊半径和阴影大小。

例如，设置一个蓝色带有阴影效果的DIV可以这样写：

div {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  box-shadow: 2px 2px 2px #888888;
}

五、渐变边框

渐变边框可以通过CSS中的border-image属性来设置。border-image接受一张图像、一个定位值和一个用于拉伸的值。

例如，设置一个渐变边框的DIV可以这样写：

div {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(to right, #00ff00, #0000ff) 1;
}