Web字体一半的CSS描边

2024-05-19 • 问答

CSS stroke允许概述字体。我只想概述字体的50％。

我已经看到了一些使用JavaSCript的变通方法，可以将CSS设置为半个字母，但是我想使用CSS来实现。

我的目标是能够将类添加到右边的星形网络字体中，使其看起来像左边的完整星形。该图像是2个不同的图标，我希望能够在该图标的网络字体上用CSS笔触效果在星星上创建“半”外观。

这是codepen，具有一个没有笔触CSS效果的图标，一个带有CSS笔触的图标。如何在CSS中设置笔触效果，以便创建一半的图标“满”和另一半的“空”？

.empty {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

我怀疑这在纯CSS中是否可行，但是如果您可以添加一些标签，则可以很简单地做到这一点，即两个图标相互叠放，并用overflow: hidden剪切一个。

HTML：

<span class="half-thumb">
    <span class="mdi mdi-thumb-up"></span>
    <span class="mdi mdi-thumb-up empty"></span>
</span>

CSS：

.half-thumb {
    position: relative;
}
.half-thumb :first-child {
    width: 50%;
    overflow: hidden;
    position: absolute;
}

本文链接：https://www.f2er.com/3162731.html