文字描边效果可以通过text-shadow来实现，也可以通过-webkit-text-stroke来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字描边效果</title>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.text-container{
width: 100%;
height: 100%;
text-align: center;
line-height: 100vh;
background: linear-gradient(45deg, #e45c08, #1309d7); /* 从左上到右下的渐变 */
}
.text{
font-size: 100px;
font-weight: 1500;
/* 这种方式也能实现但是不支持文字透明 */
/* text-shadow:
0 2px #fff,
0 -2px #fff,
-2px 2px #fff,
2px -2px #fff,
-2px 0 #fff,
2px 0 #fff; */
/* 这种方式支持文字透明，但是兼容性可能有问题 */
-webkit-text-stroke: 2px #fff;
color: transparent;
}
</style>
</head>
<body>
<div class="text-container">
<span class="text">哀吾生之须臾，羡长江之无穷</span>
</div>
</body>
</html>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 文字描边效果
发表评论 取消回复