CSS3 边框基础属性

CSS3 边框基础属性

CSS3 边框通过 border 属性控制，包含边框宽度、样式和颜色：

• 宽度：border-width（如 1px、thin）。
• 样式：border-style（如 solid、dashed、dotted）。
• 颜色：border-color（支持十六进制、RGB 等）。
  示例代码：

div {
  border: 2px solid #ff0000;
}

圆角边框（border-radius）

border-radius 用于创建圆角效果，支持百分比或固定值：

div {
  border-radius: 10px; /* 统一圆角 */
  border-radius: 5px 10px 15px 20px; /* 分别设置四个角 */
}

椭圆角可通过斜杠分隔：

div {
  border-radius: 50% / 20%; /* 水平半径 / 垂直半径 */
}

边框阴影（box-shadow）

box-shadow 添加边框阴影，参数依次为：水平偏移、垂直偏移、模糊半径、扩展半径、颜色：

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

内阴影通过 inset 关键字实现：

div {
  box-shadow: inset 0 0 8px #000;
}

边框图片（border-image）

border-image 允许使用图片作为边框，需定义切片和重复方式：

div {
  border-image: url('border.png') 30 round;
}

• 切片：30 表示从图片边缘向内裁切 30 像素。
• 重复方式：round（平铺）、repeat（重复）、stretch（拉伸）。

多边框效果

通过 box-shadow 或伪元素实现多层边框：

div {
  box-shadow: 0 0 0 5px #f00, 0 0 0 10px #0f0;
}

或使用伪元素：

div {
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px dashed #00f;
}

注意事项

• 边框不影响盒子模型的总宽度（除非使用 box-sizing: border-box）。
• outline 属性类似边框，但不占据空间，常用于高亮交互元素。