css如何制作边框

使用 border 属性制作边框

在 CSS 中，border 属性是最常用的边框制作方法。可以一次性设置边框的宽度、样式和颜色。

div {
  border: 2px solid #000000;
}

单独设置边框属性

如果需要更精细的控制，可以分别设置边框的宽度、样式和颜色。

div {
  border-width: 1px;
  border-style: dashed;
  border-color: #ff0000;
}

设置单边边框

可以单独为元素的某一边设置边框。

div {
  border-top: 3px dotted blue;
  border-right: 2px solid green;
  border-bottom: 4px double red;
  border-left: 1px inset purple;
}

边框样式选项

CSS 提供了多种边框样式选择：

div {
  border-style: none;    /* 无边框 */
  border-style: hidden;  /* 隐藏边框 */
  border-style: dotted;  /* 点状边框 */
  border-style: dashed;  /* 虚线边框 */
  border-style: solid;   /* 实线边框 */
  border-style: double;  /* 双线边框 */
  border-style: groove;  /* 3D凹槽边框 */
  border-style: ridge;   /* 3D脊状边框 */
  border-style: inset;   /* 3D内嵌边框 */
  border-style: outset;  /* 3D外凸边框 */
}

圆角边框

使用 border-radius 属性可以创建圆角边框。

div {
  border: 2px solid #333;
  border-radius: 10px;
}

多重边框效果

通过 box-shadow 属性可以实现多重边框效果。

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

渐变边框

使用 border-image 属性可以创建渐变或图像边框。

div {
  border: 10px solid transparent;
  border-image: linear-gradient(45deg, #f00, #00f) 1;
}

透明边框

设置透明边框可以保留元素的空间布局而不显示边框。

div {
  border: 5px solid transparent;
}

响应式边框

结合媒体查询可以创建响应式边框。

div {
  border: 1px solid #000;
}

@media (min-width: 768px) {
  div {
    border-width: 2px;
  }
}