如何用CSS制作带间隙及侧边图标的类边框框架？

你已经通过linear-gradient实现了带角落和中间装饰间隙的类边框，现在需要在四边中间的红色标记位置添加图标，又不想新增HTML元素，仅用CSS解决的话，可以利用多重背景层叠加的方式，在原有边框渐变的基础上，新增四个图标背景层，分别定位到四边的中间位置。

解决方案代码 #

header {
  text-align: center;
  padding: 24px;
  /* 定义图标相关变量，方便统一修改 */
  --icon: '★'; /* 替换为你需要的字体图标Unicode或使用url("icon.png") */
  --icon-color: red;
  --icon-size: 20px;
  font-family: Arial, sans-serif; /* 如果用字体图标，需对应字体族 */

  background: 
    /* 上边框渐变 */
    linear-gradient(to right, transparent 10%, black 10%, black 40%, red 40%, red 60%, black 60%, black 90%, transparent 90%) 0 0 / 100% 1px no-repeat,
    /* 下边框渐变 */
    linear-gradient(to right, transparent 10%, black 10%, black 40%, red 40%, red 60%, black 60%, black 90%, transparent 90%) 0 100% / 100% 1px no-repeat,
    /* 右边框渐变 */
    linear-gradient(to bottom, transparent 20%, black 20%, black 40%, red 40%, red 60%, black 60%, black 80%, transparent 80%) 100% 0 / 1px 100% no-repeat,
    /* 左边框渐变 */
    linear-gradient(to bottom, transparent 20%, black 20%, black 40%, red 40%, red 60%, black 60%, black 80%, transparent 80%) 0 0 / 1px 100% no-repeat,
    /* 上边中间图标 */
    radial-gradient(var(--icon-color) 50%, transparent 50%) 50% 0 / var(--icon-size) var(--icon-size) no-repeat,
    /* 下边中间图标 */
    radial-gradient(var(--icon-color) 50%, transparent 50%) 50% 100% / var(--icon-size) var(--icon-size) no-repeat,
    /* 左边中间图标 */
    radial-gradient(var(--icon-color) 50%, transparent 50%) 0 50% / var(--icon-size) var(--icon-size) no-repeat,
    /* 右边中间图标 */
    radial-gradient(var(--icon-color) 50%, transparent 50%) 100% 50% / var(--icon-size) var(--icon-size) no-repeat;
}

/* 如果使用字体图标，替换图标背景层为以下样式 */
/* header {
  background: 
    [原有四个边框渐变],
    content-box var(--icon) 50% 0 / var(--icon-size) var(--icon-size) no-repeat,
    content-box var(--icon) 50% 100% / var(--icon-size) var(--icon-size) no-repeat,
    content-box var(--icon) 0 50% / var(--icon-size) var(--icon-size) no-repeat,
    content-box var(--icon) 100% 50% / var(--icon-size) var(--icon-size) no-repeat;
  color: var(--icon-color);
} */

<header>
  <h1>Title</h1>
  <p><i>An interesting subtitle</i></p>
</header>

思路说明 #

1. 复用原有边框逻辑：保留你之前实现的四个linear-gradient边框层，确保原有装饰间隙效果不变。
2. 新增图标背景层：通过四个额外的背景层（示例中用radial-gradient实现圆形图标，也可替换为字体图标或自定义图片），利用background-position分别定位到上（50% 0）、下（50% 100%）、左（0 50%）、右（100% 50%）四个中间位置，background-size控制图标大小。
3. 变量化管理：使用CSS变量统一控制图标内容、颜色和尺寸，后续修改更便捷。

这种方法不需要新增任何HTML元素，完全通过CSS多重背景实现四边图标的添加，保持了HTML代码的简洁性。

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