Как убрать острые края у текста css?

Question

У меня есть этот код

-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;

это похоже на эффект стекла в конце текста. мне нужно удалить острые края

это когда я увеличиваю ширину text-stroke

введите описание изображения здесь

Это очень ценно для тех, кто может мне помочь.

PURE CSS только

Answer 1

Вы можете попытаться обернуть свой текст тегом 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>