css 边框制作

CSS 边框基础语法

边框通过 border 属性设置，包含三个子属性：宽度（border-width）、样式（border-style）、颜色（border-color）。完整语法示例：

div {
  border: 2px solid #ff0000; /* 宽度2px、实线样式、红色 */
}

单边边框控制

可通过方向属性单独控制某一边框：

div {
  border-top: 1px dashed blue;
  border-right: 3px dotted green;
  border-bottom: 2px double black;
  border-left: 4px groove #ccc;
}

边框样式类型

border-style 支持多种样式：

• solid：实线
• dashed：虚线
• dotted：点线
• double：双线
• groove：3D凹槽
• ridge：3D凸起
• inset：内嵌效果
• outset：外凸效果

圆角边框

使用 border-radius 创建圆角效果：

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

阴影边框

通过 box-shadow 添加阴影：

div {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3); 
  /* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
}

渐变边框

结合伪元素实现渐变边框：

div {
  position: relative;
  background: white;
}
div::before {
  content: "";
  position: absolute;
  inset: -5px; /* 边框扩展 */
  z-index: -1;
  background: linear-gradient(45deg, red, blue);
  border-radius: 12px; /* 需大于主元素圆角 */
}

透明内容区域边框

使用 outline 属性绘制不影响布局的边框：

div {
  outline: 3px solid yellow;
  outline-offset: 5px; /*  outline与元素间距 */
}

边框图像

通过 border-image 使用图片作为边框：

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}