css制作边框

使用 border 属性

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

.box {
  border: 2px solid #000;
}

单独设置边框样式

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

.box {
  border-width: 1px;
  border-style: dashed;
  border-color: red;
}

设置不同方向的边框

可以为元素的不同方向（上、右、下、左）设置不同的边框样式。

.box {
  border-top: 3px dotted blue;
  border-right: 2px solid green;
  border-bottom: 4px double orange;
  border-left: 1px dashed purple;
}

圆角边框

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

.box {
  border: 2px solid black;
  border-radius: 10px;
}

边框阴影

通过 box-shadow 属性可以为边框添加阴影效果，增强立体感。

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

渐变边框

使用 border-image 属性可以实现渐变或图片边框效果。

.box {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, red, blue) 1;
}

透明边框

通过设置 transparent 可以创建透明边框，常用于布局调整或交互效果。

.box {
  border: 5px solid transparent;
}

动态边框效果

结合伪类和过渡效果，可以实现动态边框变化。

.box {
  border: 2px solid #000;
  transition: border 0.3s ease;
}

.box:hover {
  border: 2px solid red;
}