如何设置 CSS 盒子模型的边框样式？

边框样式属性（border - style）

• 基本语法：可以通过border - style属性来设置边框的样式。这个属性可以应用于块级元素（如<div>、<p>等）和内联元素（如<span>等）。语法为border - style: [top - style] [right - style] [bottom - style] [left - style];。例如，div { border - style: solid; }会给<div>元素的四条边都设置为实线边框。
• 常见样式值：
  • solid（实线）：这是最常见的边框样式之一，会创建一个连续的、实心的线条作为边框。例如，border - style: solid;会让元素有一个实心的边框。
  • dashed（虚线）：产生一系列短划线组成的边框。例如，p { border - style: dashed; border - width: 2px; border - color: red; }会给<p>元素添加一个2像素宽的红色虚线边框。
  • dotted（点线）：创建由一系列点组成的边框。例如，span { border - style: dotted; border - width: 1px; border - color: blue; }会给<span>元素添加一个1像素宽的蓝色点线边框。
  • double（双线）：绘制两条平行的线条作为边框。两条线之间的间隔以及线的宽度由border - width属性决定。例如，div { border - style: double; border - width: 4px; border - color: green; }会给<div>元素添加一个4像素宽的绿色双线边框。
  • groove（槽线）：创建一个有立体感的、看起来像是雕刻进页面的边框。它的外观效果取决于border - color属性，通常是一种3D效果。例如，h1 { border - style: groove; border - width: 3px; border - color: gray; }会给<h1>元素添加一个3像素宽的灰色槽线边框。
  • ridge（脊线）：与groove相反，看起来像是从页面中凸起的边框，也是3D效果。例如，img { border - style: ridge; border - width: 3px; border - color: silver; }会给<img>元素添加一个3像素宽的银色脊线边框。
  • inset（凹陷）：创建一个看起来像是被压入页面的边框，用于模拟凹陷的效果。例如，input { border - style: inset; border - width: 2px; border - color: black; }会给<input>元素添加一个2像素宽的黑色凹陷边框。
  • outset（外凸）：与inset相反，产生一个看起来像是从页面中凸出的边框。例如，button { border - style: outset; border - width: 3px; border - color: orange; }会给<button>元素添加一个3像素宽的橙色外凸边框。
  • none（无边框）：用于取消元素的边框。例如，a { border - style: none; }会让<a>元素没有边框。
  • hidden（隐藏）：与none类似，不过它会隐藏边框，并且在某些情况下（如表格单元格）可能会影响布局，而none不会影响布局。例如，td { border - style: hidden; }会隐藏<td>元素的边框。

边框宽度属性（border - width）

• 基本语法：border - width属性用于设置边框的宽度。语法为border - width: [top - width] [right - width] [bottom - width] [left - width];。可以使用像素（px）、相对单位（如em、rem）等作为单位。例如，div { border - width: 2px; }会给<div>元素的四条边都设置为2像素宽的边框。如果只想设置某一条边的边框宽度，可以使用border - top - width、border - right - width、border - bottom - width或border - left - width。例如，p { border - top - width: 5px; border - bottom - width: 1px; border - style: solid; border - color: black; }会给<p>元素的上边设置5像素宽的边框，下边设置1像素宽的边框，两边都是黑色的实线边框。

边框颜色属性（border - color）

• 基本语法：border - color属性用于设置边框的颜色。语法为border - color: [top - color] [right - color] [bottom - color] [left - color];。颜色可以使用颜色名称（如red、blue等）、十六进制值（如#FF0000代表红色）、RGB值（如rgb(255, 0, 0)代表红色）或RGBA值（如rgba(255, 0, 0, 0.5)代表半透明红色）来指定。例如，div { border - color: red; border - style: dashed; border - width: 3px; }会给<div>元素添加一个3像素宽的红色虚线边框。同样，如果只想设置某一条边的边框颜色，可以使用border - top - color、border - right - color、border - bottom - color或border - left - color。例如，h1 { border - top - color: green; border - bottom - color: blue; border - style: solid; border - width: 2px; }会给<h1>元素的上边设置2像素宽的绿色实线边框，下边设置2像素宽的蓝色实线边框。

边框的简写属性（border）

• 基本语法：border属性是一个简写属性，可以同时设置边框的样式、宽度和颜色。语法为border: [width] [style] [color];。例如，div { border: 2px solid black; }会给<div>元素设置一个2像素宽的黑色实线边框。需要注意的是，这些值的顺序可以有一定的灵活性，但建议按照width - style - color的顺序来写，这样更符合习惯和可读性。如果省略了某个值，浏览器会使用默认值。例如，span { border: solid; }会给<span>元素设置一个默认宽度和颜色（通常是中等宽度和浏览器默认颜色）的实线边框。