毛玻璃效果实现

最新推荐文章于 2024-05-07 17:34:19 发布

Yolo山药

最新推荐文章于 2024-05-07 17:34:19 发布

阅读量638

点赞数 1

本文链接：https://blog.csdn.net/weixin_47493074/article/details/107356895

版权

毛玻璃效果实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			body {
				width: 100%;
				height: 100%;
				background-image: url(img/微信图片_20200314215343.jpg);
			}

			.main {
				height: 500px;
				width: 80%;
				backdrop-filter: blur(40px);
				border-radius: 10px;
				box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
					0 0.9px 1.7px rgba(0, 0, 0, 0.179),
					0 1.8px 3.5px rgba(0, 0, 0, 0.224),
					0 3.7px 7.3px rgba(0, 0, 0, 0.227),
					0 10px 20px rgba(0, 0, 0, 0.4);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;


			}
		</style>


	</head>
	<body>


		<div class="main">
			哈哈哈
		</div>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yolo山药

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
毛玻璃效果实现

毛玻璃效果实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } body { width: 100%; height: 100%; backgr
复制链接

扫一扫