css新特性学习(backdrop-filte,文本大小写，首字下沉，正方形，图片文字环绕，：where简化代码，平滑滚动，悬停放大，背景混合，字体描边，指示性中空高亮)

1.backdrop-filter背景模糊，背景过滤属性，是个非继承属性MDN上是这么说的：可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

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.字体描边

 　　可用阴影模拟

  　　 text-shadow: #7E6C5A 2px 0 0, #7E6C5A 0 2px 0, #7E6C5A -2px 0 0, #7E6C5A 0 -2px 0;

11.指示性中空高亮

　　

 

 

 效果如上图，利用阴影把阴影设置得很大，

<!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>

　　

 

posted @ 2022-06-28 16:50  月下云生  阅读(384)  评论(0)    收藏  举报