css制作div边框

使用 border 属性设置边框

通过 CSS 的 border 属性可以快速为 div 设置边框。该属性是 border-width、border-style 和 border-color 的简写形式。

div {
  border: 2px solid #000000;
}

单独设置边框样式

如果需要单独控制边框的宽度、样式或颜色，可以使用以下属性：

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

设置不同方向的边框

可以为 div 的四个方向分别设置不同的边框样式：

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

圆角边框

使用 border-radius 属性可以为边框添加圆角效果：

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

阴影效果

通过 box-shadow 属性可以为边框添加阴影效果：

div {
  border: 1px solid #cccccc;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

透明边框

设置透明边框可以保留空间而不显示颜色：

div {
  border: 5px solid transparent;
}

渐变边框

使用 CSS 渐变和 border-image 属性可以创建渐变边框：

div {
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue) 1;
}

双色边框

通过伪元素可以实现双色边框效果：

div {
  position: relative;
  border: 3px solid red;
}
div::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 3px solid blue;
}