css效果(1)-背景模糊，倒影，文字凸起，文字凹陷

最新推荐文章于 2024-05-22 09:30:33 发布

ygkyufcl

最新推荐文章于 2024-05-22 09:30:33 发布

阅读量532

点赞数 1

分类专栏： H5、CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/ygkyufcl/article/details/113996438

版权

背景模糊

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

最低0.47元/天解锁文章

ygkyufcl

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css效果(1)-背景模糊，倒影，文字凸起，文字凹陷

背景模糊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 1
复制链接

扫一扫

专栏目录