css制作方框

使用 border 属性制作方框

通过 CSS 的 border 属性可以快速为元素添加方框边框。以下是一个基本示例：

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

border 属性是简写形式，分别设置边框宽度、样式和颜色。支持多种边框样式：

• solid：实线
• dashed：虚线
• dotted：点线
• double：双线

单独设置各边边框

如果需要为方框的每条边设置不同的样式：

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

圆角方框

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

.rounded-box {
  border: 2px solid #000;
  border-radius: 10px;
  width: 200px;
  height: 200px;
}

要创建圆形，可以将 border-radius 设置为 50%：

.circle {
  border: 2px solid #000;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

阴影效果

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

.shadow-box {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  width: 200px;
  height: 200px;
}

透明边框

使用 RGBA 颜色值可以创建半透明边框：

.transparent-border {
  border: 10px solid rgba(0,0,0,0.5);
  width: 200px;
  height: 200px;
}

渐变边框

虽然 CSS 不直接支持渐变边框，但可以通过伪元素实现：

.gradient-border {
  position: relative;
  width: 200px;
  height: 200px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, red, blue);
  z-index: -1;
}

响应式方框

使用百分比或视口单位可以创建响应式方框：

.responsive-box {
  border: 2px solid #000;
  width: 50%;
  height: 50vw;
  max-width: 300px;
  max-height: 300px;
}