php毛玻璃,简单CSS实现毛玻璃效果

毛玻璃大家应该都懂是什么来的，咱也废话不多说直接上代码：

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部分：

本文标签：HTML

版权声明：若无特殊注明，本文为《小傲世》原创，转载请保留文章出处。

本文链接：https://pjax.vip/170.html

正文到此结束