css制作图框

使用 border 属性制作基础图框

通过 border 属性可以快速为元素添加边框，支持自定义宽度、样式和颜色：

.box {
  border: 2px solid #000; /* 宽度2px、实线、黑色 */
  padding: 20px; /* 内边距 */
  background-color: #f9f9f9; /* 背景色 */
}

圆角边框效果

通过 border-radius 属性实现圆角效果，数值越大圆角越明显：

.rounded-box {
  border: 3px dashed #3498db; /* 虚线边框 */
  border-radius: 15px; /* 圆角半径 */
  padding: 15px;
}

阴影增强立体感

利用 box-shadow 为图框添加投影，提升视觉层次：

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

渐变边框效果

结合 background-clip 和渐变背景模拟渐变边框：

.gradient-border {
  padding: 10px;
  background: linear-gradient(white, white), 
              linear-gradient(to right, #ff7e5f, #feb47b);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: 4px solid transparent;
}

双色/多色边框

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

.multicolor-border {
  border: 10px solid;
  border-image: linear-gradient(45deg, purple, gold) 1;
  padding: 15px;
}

注意事项

• 调整 padding 确保内容与边框有适当间距。
• 使用 box-sizing: border-box 防止边框宽度影响元素总尺寸。
• 测试不同浏览器的兼容性，尤其针对 border-image 和渐变边框。