如何偏移文本边框？已实现带边框文本，求调整方法

嘿，我明白你想给文本的描边（也就是你现在用-webkit-text-stroke实现的蓝色边框）做偏移对吧？默认的text-stroke是沿着文字轮廓居中的，没有直接的偏移属性，不过我们有两种靠谱的方法来实现这个需求：

方法1：用text-shadow模拟偏移描边 #

因为-webkit-text-stroke不支持偏移参数，我们可以用多层text-shadow来模拟带有偏移的"描边"效果。通过设置阴影的偏移量和重复叠加来匹配原描边的厚度：

h1 {
  font-size: 35pt;
  text-align: center;
  font-family: 'Josefin Sans';
  color: #e89cab;
  /* 模拟向右下偏移2px的蓝色描边，叠加4层近似原1.72px的厚度 */
  text-shadow: 
    2px 2px 0 #0500ff,
    2px 2px 0 #0500ff,
    2px 2px 0 #0500ff,
    2px 2px 0 #0500ff;
}

• 调整2px 2px的数值就能改变偏移方向和距离：比如-2px -2px就是向左上偏移
• 叠加的层数越多，描边越粗，你可以根据原1.72px的厚度调整层数，直到效果匹配

方法2：用伪元素实现精确偏移描边 #

如果需要更精准的控制，比如保留原描边的精确厚度，我们可以用伪元素复制文本，将其设置为描边色并偏移位置，放在原文本下方：

h1 {
  font-size: 35pt;
  text-align: center;
  font-family: 'Josefin Sans';
  color: #e89cab;
  position: relative; /* 让伪元素基于该元素定位 */
}

h1::before {
  content: attr(data-text); /* 复制原文本内容 */
  position: absolute;
  top: 2px; /* Y轴偏移量，负数向上偏移 */
  left: 2px; /* X轴偏移量，负数向左偏移 */
  color: #0500ff;
  z-index: -1; /* 把伪元素放在原文本下层 */
  -webkit-text-stroke: 1.72px #0500ff; /* 保持原描边厚度 */
}

使用时需要给h1标签添加data-text属性，和文本内容一致：

<h1 data-text="你的标题内容">你的标题内容</h1>

额外说明 #

如果你其实是想让文本本身相对于容器的边框偏移，那直接给h1添加margin或padding即可，比如：

h1 {
  /* 其他原有样式 */
  margin-left: 10px; /* 向右偏移10px */
  padding-top: 5px; /* 向下偏移5px */
}

内容的提问来源于stack exchange，提问作者Narjes Ben Slimen