我想强调字符串的最后 3 个字符，例如：
123456789
很容易将最后三个包裹起来<strong> or <span class="">，但我想知道是否可以仅使用 CSS 来完成？所以 html 会是这样的：
<span class="mytext">123456789</span>
CSS 中添加的强调mytext class?
这里有一个crazy使用滤镜和 SVG 来模拟最后 3 位数字的粗体效果。
仅适用于镀铬
.mytext {
display: inline-block;
margin: 10px;
font-size: 50px;
font-family: monospace;
position: relative;
filter: drop-shadow(0px 0px 0px black);
}
.mytext:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 3ch;
backdrop-filter: url(#shadow);
}
<span class="mytext">123456789</span>
<span class="mytext" style="font-size:25px">123456789568</span>
<span class="mytext" style="font-size:25px">123568</span>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="0" dy="0" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="1" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->
<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
<feFuncA id="contour" type="table" tableValues="0 1 0.65 0.5 0.55 0.6 0.65 0.55 0.4 0.1 0"/>
</feComponentTransfer>
<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
<feFuncA id="spread-ctrl" type="linear" slope="11"/>
</feComponentTransfer>
<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="SA-o-b-c-s-recolor"/>
<!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0" k2="1" result="SA-o-b-c-s-r-mix"/>
<!-- Merge the shadow with the original -->
<feMerge>
<feMergeNode in="SA-o-b-c-s-r-mix"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
我使用以下链接来生成过滤器：https://codepen.io/mullany/pen/sJopz https://codepen.io/mullany/pen/sJopz
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
