当前位置：首页 > CSS

css制作图框

2026-01-28 15:07:22CSS

使用 border 属性创建基础图框

通过 CSS 的 border 属性可以快速创建简单图框。border 属性支持定义宽度、样式和颜色：

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

自定义边框各边样式

利用 border-top、border-right 等属性为不同边设置独立样式：

.asymmetric-box {
  border-top: 3px dashed #ff5722;
  border-right: 1px dotted #4caf50;
  border-bottom: 5px double #2196f3;
  border-left: 2px groove #9c27b0;
}

添加圆角效果

使用 border-radius 属性实现圆角图框：

css制作图框

.rounded-box {
  border: 2px solid #607d8b;
  border-radius: 15px;
  padding: 20px;
}

创建阴影效果

通过 box-shadow 增强图框的立体感：

.shadow-box {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  background-color: #fff;
}

使用伪元素创建装饰边框

通过 ::before 或 ::after 伪元素实现复杂边框效果：

css制作图框

.fancy-box {
  position: relative;
  padding: 30px;
}
.fancy-box::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px dashed #ff9800;
  z-index: -1;
}

渐变边框实现

结合 background-clip 和 padding-box 实现渐变边框：

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

多边框效果

利用 box-shadow 创建多个边框：

.multiple-borders {
  width: 200px;
  height: 150px;
  background: #fff;
  border: 5px solid #3f51b5;
  box-shadow: 
    0 0 0 10px #8bc34a,
    0 0 0 15px #ffeb3b;
}

标签: css