CSS3实现毛玻璃效果

CSS代码
来源：站三界导航
112阅读
2022-05-08

效果如下图所示：

代码如下：

结构层

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>CSS 实现毛玻璃效果</title>
	
	</head>
	<body>
	    <div class="box">
	        <h2>一个毛玻璃效果</h2>
	    </div>
	</body>
</html>

样式层

body, 
.box::before{
    height: 2000px;
    background: url('1.jpg') 0 / cover fixed;
    background-repeat:no-repeat ;
    background-size: 2000px;
           
}
h2{
    text-align: center;
    line-height: 300px;
}
.box{
    width: 800px;
    height: 400px;
    position: relative;
    margin: 200px auto;

    background:hsla(0,0%,0%,.25) border-box;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 60%);
    text-shadow:0 1px 1px hsla(0,0%,100%,.3);
}
.box::before{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    filter:blur(20px);
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8353.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：纯CSS教你实现磨砂玻璃背景效果

下一篇： CSS鼠标样式