字体模糊,多重边框

版权声明:学习交流。。 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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/83716960