css新特性学习(backdrop-filte,文本大小写，首字下沉，正方形，图片文字环绕，：where简化代码，平滑滚动，悬停放大，背景混合，字体描边，指示性中空高亮)
1.backdrop-filter背景模糊，背景过滤属性，是个非继承属性MDN上是这么说的：可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
1 | backdrop-filter: blur(6rpx); |
兼容性
2.文本设为大小写
text-transform属性强制任何文本大写或者小写，值有 uppercase(转为大写)，lowercase(转为小写)，capitalize(转首字母大写)
3.首字母下沉
::first-letter选择器，仅适用于块级元素
4.纵横比
aspect-ratio:1:1; aspect-radio媒体属性用来设置视口的宽高比
5.图文环绕
shape-outside，用于设置形状，有助于定义文本流动区域，circle，ellipse,polygon,url
6.:where简化代码
原 .box .title, .box .img, .box .text, .box .content { color: #000; } 可简化为 .box :where(.title,.img, .text,.content) { color: #000; }
7.平滑滚动
scroll-behavior:smooth;
8.悬停放大
利用悬停伪类hover和元素2d和3d转换属性transform
img:hover{ transform: scale(1.5); }
9.背景混合 background-blend-mode属性
ie,edge 不支持
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
正常的混合模式| 正片叠底 | 滤色 | 叠加 | 变暗 | 变亮 | 颜色减淡 | 饱和度 | 颜色 | 变亮
10.字体描边
可用阴影模拟
11.指示性中空高亮
效果如上图，利用阴影把阴影设置得很大，
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box1{ position: absolute; width:50vw; height:50vh; top: 25vw; left: 25%; box-shadow: rgba(0,0,0,.6) 0 0 0 100vh; } </style> </head> <body> <img src="https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64" style="height:100vw; height:100vh;"> <div class="box1"> </div> </body></html> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET10 - 预览版1新功能体验（一）