css - 如何删除文本笔划 css 中的锐边？

问题描述

我有这个代码

-webkit-text-stroke: 30px #67676726;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777, 
0px 5px 0px #777777, 
0px 5px 0px #777777, 
0px 0px 15px #777777, 
0px 0px 15px #777777, 
0px 6px 0px #777777, 
0px 7px 0px #777777, 
0px 8px 0px #777777, 
0px 5px 0px #777777, 
0px 5px 0px #777777;

这就像文本后面的玻璃效果。我需要的是我想去除锋利的边缘

那是我增加文本笔画宽度的时候

非常感谢那些可以帮助我的人。

仅纯 CSS

标签： css

您可以尝试将文本包装在div标签内，添加宽度和高度并将其设置为overflow，hidden以便您的边缘被切断。

这里有一个例子：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.text {
    margin: 40px;
    width: 160px;
    height: 39px;
    position: relative;
    overflow: hidden;

}

h1 {
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    -webkit-text-stroke: 20px #0e000026;
    text-shadow: 0px 4px 20px #d5d5d5,
        0px 3px 0px #777777,
        0px 5px 0px #777777,
        0px 5px 0px #777777,
        0px 0px 15px #777777,
        0px 0px 15px #777777,
        0px 6px 0px #777777,
        0px 7px 0px #777777,
        0px 8px 0px #777777,
        0px 5px 0px #777777,
        0px 5px 0px #777777;
}

<div class="text">
   <h1>LetterNVZ</h1>
</div>

css - 如何删除文本笔划 css 中的锐边？

问题描述

解决方案

推荐阅读