css 边框

/* 示例代码：设置一个简单的边框 */

/* 1. 使用 shorthand 属性设置边框 */
div {
  border: 2px solid red; /* 边框宽度为2px，样式为实线，颜色为红色 */
}

/* 2. 分别设置四个边的边框 */
div {
  border-top: 1px dashed black;    /* 上边框为1px黑色虚线 */
  border-right: 2px dotted blue;   /* 右边框为2px蓝色点线 */
  border-bottom: 3px double green; /* 下边框为3px绿色双线 */
  border-left: 4px groove yellow;  /* 左边框为4px黄色凹槽线 */
}

/* 3. 设置圆角边框 */
div {
  border: 2px solid red;
  border-radius: 10px; /* 圆角半径为10px */
}

/* 4. 设置不同边框宽度 */
div {
  border-width: 5px 10px 15px 20px; /* 上 右 下 左 的边框宽度分别为5px, 10px, 15px, 20px */
  border-style: solid;              /* 边框样式为实线 */
  border-color: red;                /* 边框颜色为红色 */
}

解释说明：

• border 是 CSS 中用于设置元素边框的属性。它是一个简写属性，可以同时设置边框的宽度、样式和颜色。
• border-top, border-right, border-bottom, border-left 分别用于单独设置上、右、下、左边框。
• border-radius 用于设置圆角边框，使边框的四个角呈现圆弧形。
• border-width 可以分别设置四条边的宽度，顺序是：上 右 下 左。
• border-style 和 border-color 分别用于设置边框的样式和颜色。

希望这些示例能帮助你更好地理解如何使用 CSS 设置边框。