如何使用CSS为PHP Fusion网站内容添加条纹边框？

当然可以只用CSS实现这种条纹边框效果，不需要依赖额外图片，用CSS渐变就能轻松搞定。先帮你分析下原来代码的问题：你嵌套了两层div，外层加了黑色背景和padding，内层是红色背景，但没设置条纹相关的样式，所以自然看不到条纹效果。

下面给你两种可行的纯CSS方案，对应你想要的条纹边框效果：

方案1：利用背景渐变+padding模拟边框 #

这个思路是用外层容器的padding预留出边框空间，给外层设置重复线性渐变背景模拟条纹，内层容器用纯色背景覆盖中间内容区，让padding区域的条纹显示出来。

首先修正你的HTML（注意闭合标签）：

<div id="content">
  <div class="content">
    <!-- 这里放置你的内容 -->
  </div>
</div>

对应的CSS代码：

#content {
  width: 500px;
  /* 这里的padding值就是条纹边框的宽度 */
  padding: 10px;
  /* 定义水平方向的黑白重复条纹，每个条纹段5px */
  background: repeating-linear-gradient(
    to right,
    black 0,
    black 5px,
    white 5px,
    white 10px
  );
}

.content {
  width: 100%;
  height: 200px;
  /* 内容区域的背景色，覆盖外层的渐变 */
  background-color: red;
}

如果想要垂直方向的条纹（条纹上下延伸），只需要把渐变方向改成to bottom即可：

#content {
  background: repeating-linear-gradient(
    to bottom,
    black 0,
    black 5px,
    white 5px,
    white 10px
  );
}

方案2：使用border-image属性（更贴合边框语义） #

如果你想直接用CSS边框属性来实现，可以借助border-image搭配线性渐变，这样更符合"边框"的语义：

#content {
  width: 500px;
  height: 200px;
  /* 设置边框宽度 */
  border: 10px solid;
  /* 用重复渐变作为边框图像，最后一个值1表示边框图像的切片方式 */
  border-image: repeating-linear-gradient(to right, black 0, black 5px, white 5px, white 10px) 1;
}

.content {
  width: 100%;
  height: 100%;
  background-color: red;
}

这两种方案都能完美实现你想要的条纹边框效果，完全不需要额外图片，纯CSS就能搞定。

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