css制作图框

使用边框属性制作图框

通过 border 属性可以快速为元素添加图框。示例代码：

.box {
  border: 2px solid #000; /* 宽度2px、实线、黑色边框 */
  padding: 20px; /* 内边距 */
  width: 200px;
  height: 100px;
}

• border-width：调整边框粗细（如 3px）。
• border-style：设置样式（如 dashed 虚线、dotted 点线）。
• border-color：修改颜色（如 #ff0000 红色）。

圆角图框设计

通过 border-radius 属性实现圆角效果：

.rounded-box {
  border: 1px solid #ccc;
  border-radius: 10px; /* 圆角半径 */
  padding: 15px;
}

• 单独控制四角：border-radius: 5px 10px 15px 20px;（顺序：左上、右上、右下、左下）。

阴影效果增强图框

使用 box-shadow 添加投影：

.shadow-box {
  border: 1px solid #ddd;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* 水平偏移、垂直偏移、模糊半径、颜色 */
  padding: 10px;
}

• 内阴影：box-shadow: inset 0 0 8px #000;。

渐变或图片边框

通过 border-image 实现复杂边框：

.gradient-border {
  border: 10px solid transparent;
  border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1;
  padding: 20px;
}

• border-image-source：指定渐变或图片路径。
• border-image-slice：定义切割方式（如 1 表示不重复填充）。

双色或自定义边框

利用伪元素叠加实现复杂边框：

.double-border {
  position: relative;
  padding: 15px;
  background: #fff;
}
.double-border::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #f00;
  z-index: -1;
}

响应式图框适配

使用百分比或视口单位确保图框适应不同屏幕：

.responsive-box {
  border: 1px solid #333;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 2vw; /* 根据视口宽度调整内边距 */
}