用css制作方框

使用CSS制作方框的方法

基础方框 通过border属性可以快速创建方框。设置边框的宽度、样式和颜色即可。

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

圆角方框 使用border-radius属性可以为方框添加圆角效果。数值越大，圆角越明显。

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

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

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

虚线边框 将border-style设置为dashed可以创建虚线边框。

.dashed-box {
  border: 2px dashed #000;
  width: 200px;
  height: 100px;
}

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

.gradient-box {
  border: 5px solid transparent;
  border-image: linear-gradient(to right, #ff0000, #0000ff) 1;
  width: 200px;
  height: 100px;
}

响应式方框 通过百分比或vw/vh单位可以使方框适应不同屏幕尺寸。

.responsive-box {
  border: 2px solid #000;
  width: 80%;
  height: 20vh;
}

动画方框 使用@keyframes和animation属性可以为方框添加动画效果。

.animated-box {
  border: 2px solid #000;
  width: 200px;
  height: 100px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}