Question

我需要实现以下布局，特别是底部蓝线与＆＃39; p＆＃39;相交的效果，以及围绕它的线条＆＃39;

目前的HTML很简单：

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

要求是：

需要是动态的，如果文本被更改而另一个字母与该行相交，则需要相同的效果，其中蓝线在文本周围打破。
必须与主流浏览器的当前版本兼容浏览器。
必须有回应。线条的宽度将以不同的分辨率变化。

我尝试过的事情：

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

我也试过text-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;
}

如何使用CSS实现此文本笔划效果？

1 个答案: