简单CSS实现毛玻璃效果
- A
毛玻璃大家应该都懂是什么来的，咱也废话不多说直接上代码：
CSS部分：
* {
padding: 0;
margin: 0;
outline: 0;
}
html,
body {
width: 100%;
height: 100%;
background: url("http://h1.ioliu.cn/bing/HappyBalloon_ZH-CN0324866466_1920x1080.jpg?imageslim") no-repeat center/cover;
}
.content {
float: left;
width: calc(100% - 160px);
height: calc(100% - 160px);
margin: 80px;
overflow: hidden;
border-radius: 40px;
box-shadow: 0 0 80px #555;
}
.bg {
float: left;
width: calc(100% + 160px);
height: calc(100% + 160px);
margin: -80px 0 0 -80px;
background: url("http://h1.ioliu.cn/bing/HappyBalloon_ZH-CN0324866466_1920x1080.jpg?imageslim") no-repeat center/cover;
filter: blur(20px);
}
HTML部分：
<div class="content">
<div class="bg"></div>
</div>
版权声明：若无特殊注明，本文为《傲世》原创，转载请保留文章出处。
本文链接：https://www.recho.cn/168.html
正文到此结束
发表吐槽
匿名评论 请叫我雷锋~
竟然没有人吐槽，快赶紧抢沙发吧！