CSS border 属性

在 web 开发中，border 属性用于定义元素的边框样式。通过设置不同的 border 属性值，可以控制元素边框的颜色、宽度和样式。

border-width

border-width 属性用于设置元素边框的宽度。可以设置一个值，也可以设置四个值分别表示上、右、下、左四个方向的边框宽度。

示例代码：

div {
  border-width: 2px; /* 设置所有方向的边框宽度为2像素 */
}

span {
  border-width: 1px 2px 3px 4px; /* 上边框1像素，右边框2像素，下边框3像素，左边框4像素 */
}

border-style

border-style 属性用于设置元素边框的样式。常用的样式包括 solid（实线）、dashed（虚线）、dotted（点线）等。

示例代码：

div {
  border-style: solid; /* 实线边框 */
}

span {
  border-style: dashed; /* 虚线边框 */
}

border-color

border-color 属性用于设置元素边框的颜色。可以设置一个值，也可以设置四个值分别表示上、右、下、左四个方向的边框颜色。

示例代码：

div {
  border-color: red; /* 设置所有方向的边框颜色为红色 */
}

span {
  border-color: red green blue black; /* 上边框红色，右边框绿色，下边框蓝色，左边框黑色 */
}

border

border 属性可以同时设置元素的边框宽度、样式和颜色。语法为 border: width style color。

示例代码：

div {
  border: 1px solid black; /* 1像素的黑色实线边框 */
}

span {
  border: 2px dashed blue; /* 2像素的蓝色虚线边框 */
}

以上就是关于 CSS 属性 border 的详细介绍，通过合理运用 border 属性，可以为页面元素添加漂亮的边框效果。