如何使用 CSS 实现这种文字描边效果？ [复制]

Question

我需要实现如下的布局，具体是底部蓝线与'p'相交的效果，周围有'break'线：

http://imgur.com/tyuXXRE

当前的 HTML 很简单：

    <h2>
        An unmatched fishing & boating
        <span class="thick">experience</span>
    </h2>

要求是：

1. 需要是动态的，如果文本改变了，另一个字母与线相交，那么需要同样的效果，蓝色的线在文本周围中断。

2. 必须跨浏览器兼容当前主流浏览器版本。

3. 必须响应。不同分辨率下线条的宽度会发生变化。

我尝试过的：

我首先查看了 -webkit-text-stroke 属性，因为我基本上是在模拟 Photoshop 笔画。除了它仅与 webkit 兼容这一事实之外，它似乎是向内而不是从外部创建笔画，因此这是行不通的。也许我错过了这个属性的一些东西。

我也尝试过text-shadow，但由于它不支持像 box-shadow 这样的传播，我无法实现强硬路线。我尝试堆叠多个文本阴影，但没有达到预期的效果。

也许有办法处理它:before / :after 伪元素？还是我只是在寻找一种更简单的方法？

Answer 1

一个很酷的挑战。

我的解决方案是基于文本阴影的。因此，您需要对其进行更改并根据自己的喜好进行调整。即您希望您的信件在多大程度上被删掉。 因此，根据您的字体类型和大小，您需要更改文本阴影大小。此外，如果您想让线条切割得更大，您还可以在另一个上叠加更多阴影。

https://jsfiddle.net/1to5e8gL/

<h2>
    An unmatched fishing &amp; boating <br>
    <span class="thick">experqiyencje</span>
</h2>

    h2 {
    background: #00008B;
    color: #FFF;
    font-family: sans-serif;
    padding: 1em;
}

.thick {
    font-size: 60px;
    text-shadow: 8px 2px #00008B , -8px -2px #00008B;
}

span:after {
    content: '';
    width: 100%;
    border-bottom: 3px solid #FFA500;
    display: block;
    margin-top: -7px;
}