html背景毛玻璃效果代码,css3毛玻璃效果（背景虚化）

.wrap h3 {

font-size:18px;

color:#ffffff;

}

.wrap p {

font-size:14px;

color:#ffffff;

font-variant-ligatures:common-ligatures

discretionary-ligatures

historical-ligatures;

}

body {

min-height:100vh;

box-sizing:border-box;

margin:0;

padding-top:calc(50vh - 6em);

font:150%/1.6 Baskerville,Palatino,serif;

}

body,.wrap::before {

background:url("http://www.jq22.com/demo/circleMagic201710082042/dest/img/bg.jpg") 0 / cover fixed;

}

.wrap {

position:relative;

margin:0 auto;

padding:1em;

max-width:23em;

background:hsla(0,0%,100%,.25) border-box;

overflow:hidden;

border-radius:.3em;

box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);

text-shadow:0 1px 1px hsla(0,0%,100%,.3);

}

.wrap::before {

content:'';

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:-30px;

z-index:-1;

-webkit-filter:blur(20px);

filter:blur(20px);

}