css字体模糊，多重边框demo效果示例（整理）

知秋~

已于 2022-06-14 11:22:43 修改

阅读量290

点赞数

文章标签：字体模糊多重边框

于 2018-11-04 16:20:23 首次发布

本文链接：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>

在这里插入图片描述

关注博主即可阅读全文

优惠劵

知秋~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css字体模糊，多重边框demo效果示例（整理）

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;字体模糊，多重边框&lt;/title&gt; &lt;style&gt; .div{ width: 500px; height: 500
复制链接

扫一扫