背景模糊
backdrop-filter: saturate(180%) blur(1em);
-webkit-backdrop-filter: saturate(180%) blur(1em);
倒影
-webkit-box-reflect: below -60px -webkit-gradient(linear,right 60%,right bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.3)));
文字凸起
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
文字凹陷
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
代码演示
<html>
<head>
<style type="text/css">
.p2{margin-top:0}
.p3,.p4{margin-bottom:0;margin-top:10px;}
.p1,.p2,.p3,.p4{font-size:20px;width:300px;height:100px;line-height:100px;text-align:center;}
.p1{
background:rgb(255,255,255,0.1);
position:fixed;
top:0;
backdrop-filter: saturate(180%) blur(1em);
-webkit-backdrop-filter: saturate(180%) blur(1em);
}
.p2{
font-size: 50p