版权声明:学习交流。。 https://blog.csdn.net/qq_38881495/article/details/83716960
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体模糊,多重边框</title>
<style>
.div{
width: 500px;
height: 500px;
background: red;
position: relative;
top: 50%;
/*transform: translateY(-50%);*/
transform: translateY(40px);
/*字体模糊*/
color: transparent;
text-shadow: #1900ff 0 0 3px;
}
/*利用重复指定box-shadow来达到多个边框的效果*/
.show{
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
</style>
</head>
<body>
<div class="div">测试</div>
<div class="show"></div>
</body>
</html>