css如何制作边框

使用 border 属性

通过 border 属性可以快速为元素添加边框。该属性是 border-width、border-style 和 border-color 的简写形式。

.element {
  border: 2px solid #000000;
}

单独设置边框样式

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

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

设置单边边框

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

.element {
  border-top: 3px dotted #00ff00;
  border-right: 2px solid #0000ff;
  border-bottom: 1px double #ff00ff;
  border-left: 4px groove #ffff00;
}

边框圆角

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

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

边框阴影

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

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

使用渐变边框

通过 border-image 属性可以实现渐变或图片边框：

.element {
  border: 10px solid transparent;
  border-image: linear-gradient(45deg, #ff0000, #00ff00) 1;
}

透明边框

设置透明边框可以在布局中保留空间而不显示边框：

.element {
  border: 5px solid transparent;
}