CSS 边框样式

1. 简介

CSS（Cascading Style Sheets）是用于描述网页上元素的样式的一种标记语言。其中，边框样式是 CSS 中的一个重要部分，可以通过设置边框样式来定义元素的边框外观。本文将详细介绍 CSS 中的边框样式，包括边框样式的基本概念、不同样式的设置方法，以及常用的边框样式。

2. CSS 边框样式的基本概念

在 CSS 中，边框样式通过 border-style 属性来设置。border-style 属性可接受的值有以下几种：

none：无边框；
hidden：隐藏边框，边框不可见但占据空间；
dotted：点线边框；
dashed：虚线边框；
solid：实线边框；
double：双线边框；
groove：凹槽边框；
ridge：凸槽边框；
inset：内嵌边框；
outset：外嵌边框。

边框样式设置如下所示：

border-style: value;

可以通过 border-style 属性单独设置元素的边框样式，也可以与其他边框样式属性（如 border-color、border-width）一起使用。

边框样式的默认值为 none，即默认情况下元素不显示边框。

3. 不同样式的边框设置

3.1 无边框

如果不希望元素显示任何边框，可以将 border-style 属性的值设置为 none。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border-style: none;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

设置 border-style 为 none 后，div 元素的边框将不可见。

3.2 隐藏边框

隐藏边框与无边框不同，隐藏边框虽然不可见，但仍然占据空间。可以通过将 border-style 的值设置为 hidden 来实现边框的隐藏。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      border-style: hidden;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.3 点线边框

点线边框由一系列离散的小点连接而成，可以通过将 border-style 的值设置为 dotted 来实现点线边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px dotted black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.4 虚线边框

虚线边框由一系列短线段连接而成，可以通过将 border-style 的值设置为 dashed 来实现虚线边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px dashed black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.5 实线边框

实线边框由一条连续的直线组成，是最常用的边框样式。可以通过将 border-style 的值设置为 solid 来实现实线边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.6 双线边框

双线边框由两串平行的线段组成，可以通过将 border-style 的值设置为 double 来实现双线边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px double black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.7 凹槽边框

凹槽边框呈现立体感，效果就像一个槽。可以通过将 border-style 的值设置为 groove 来实现凹槽边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px groove black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.8 凸槽边框

凸槽边框与凹槽边框相反，呈现一种突出的效果。可以通过将 border-style 的值设置为 ridge 来实现凸槽边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px ridge black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.9 内嵌边框

内嵌边框效果是在边框内部产生一种凹陷的外观。可以通过将 border-style 的值设置为 inset来实现内嵌边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px inset black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3.10 外嵌边框

外嵌边框效果是在边框外部产生一种凸出的外观。可以通过将 border-style 的值设置为 outset 来实现外嵌边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px outset black;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

4. 常用的边框样式

除了上述介绍的基本边框样式外，还有一些常用的特殊边框样式，如斜角边框、圆角边框和图片边框。

4.1 斜角边框

斜角边框是指只有某些角落有边框，其余角落无边框的效果。可以通过组合不同的边框样式来实现斜角边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border-top: 2px solid black;
      border-right: 2px dashed black;
      border-bottom: none;
      border-left: none;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

4.2 圆角边框

圆角边框是指边框的角落被圆滑地处理，使边框看起来更加柔和。可以通过 border-radius 属性来实现圆角边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

4.3 图片边框

可以使用 CSS 的 border-image 属性将图片作为边框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 20px solid transparent;
      border-image: url(border.png) 30 round;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

其中，border-image 的值由以下几部分组成：