gpt4 book ai didi

css - 我怎样才能用CSS实现这种文字描边效果?

转载 作者:行者123 更新时间:2023-11-28 11:32:35 25 4
gpt4 key购买 nike

<分区>

我需要实现下面的布局,特别是底部蓝线与'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那样支持spread,所以我无法实现硬线。我尝试堆叠多个文本阴影,但没有达到预期效果。

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com