text-stroke 描边
css 代码
设置基础的样式
-webkit-text-stroke
使用webkit
内核设置文字描边效果,当文字为透明或者是其它颜色都可以由相同的效果
body {
background: linear-gradient(to right, #f3f344, #fd8b18, #f13d39, #90108f);
}
.out {
position: relative;
width: 100%;
height: 100vh;
}
.text-stroke {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-text-stroke: 2px #fff;
transform: translate(-50%, -50%);
color: transparent;
font-weight: 800;
font-size: 166px;
}
html 结构
<body>
<div class="out">
<h1 class="text-stroke">text-stroke描边</h1>
</div>
</body>