如何使用CSS实现上下样式不同、边角带轻微倾斜的边框？

方法一：纯CSS渐变+伪元素实现 #

这种方案无需额外图片，通过CSS渐变与伪元素模拟效果，灵活性更强：

.box {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 30px;
  background-color: #fff;
}

.box::before, .box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 15px;
}

/* 顶部边框：带棋盘格纹理，边角左倾斜 */
.box::before {
  top: 0;
  transform: skewX(-2deg);
  background: linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%),
              linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

/* 底部边框：重复线条纹理，边角右倾斜 */
.box::after {
  bottom: 0;
  transform: skewX(2deg);
  background: repeating-linear-gradient(90deg, #666, #666 5px, transparent 5px, transparent 10px);
}

方法二：优化你的border-image方案 #

如果坚持用图片实现，需确保图片切片与代码参数匹配：

1. 提前设计好包含倾斜边角、上下不同样式的边框图
2. 调整切片参数与图片分割线位置对应

修改后的代码示例：

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 30px;
  border: 15px solid transparent;
  /* slice值需匹配图片实际分割位置，fill用于填充边框中间区域（无需可去掉） */
  border-image: url(border.png) 30 fill / 15px / 0 stretch;
}

核心注意点 #

• 纯CSS方案适合样式简单的场景，无需额外资源，响应性更好
• border-image方案适合复杂纹理边框，但需要精准设计切片图片

内容的提问来源于stack exchange，提问作者derani7551