CSS新用法 - mask、CSS嵌套语法

释放双眼，带上耳机，听听看~！

mask

.shadow{
	width: 200px;
	height: 200px;
	background:black;
	border-radius:10px;
	box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}

解释：会用Photoshop的我解释为“剪贴蒙版”，不会用Photoshop的解释为通过遮罩或者裁切特定区域的图片的方式，来隐藏一个元素的部分或者全部可见区域。

比如我有两个图，要遮罩的图必须要有缝隙，不让无法透过前面的图看到后面的背景，我这里的第二个图就是背景透明的

<div class="mask"></div>

.mask {
  /* 无关紧要的样式 */
  max-width: 500px;
  aspect-ratio: 16/9;
  background-image: url("https://s2.loli.net/2023/04/13/RmEWCI1Jze8HNtB.png");
  background-size: cover;

	/* 由于没有完全支持，不能直接写mask:xxx,需要加前缀 */
  -webkit-mask-image: url("https://s2.loli.net/2023/04/13/YPpAQXOjhq1l5iW.png");
}

一个基本的效果

可能这种效果基本没什么用，那来说一个比较有用的操作

我们有这样一张图片，现在需要在上面加上文字，由于背景复杂导致文字边缘很难看清，继而导致了文字的易读性并没有那么好

这时我们可能会想到使用backdrop-filter 加一个毛玻璃效果

一个矩形的毛玻璃效果显然非常突兀，因为可以明显感知到div和背景的边界，这时候我们就可以利用mask做一个羽化效果

这里mask后面的url是什么呢，其实是一个图，一个用css绘制的图

讲一下如何制作这个图，知道了如何制作，就可以自定义这个羽化边缘的半径了，就可以自行控制边缘是锐利些还是模糊些。

首先我们用css写一个这样的元素，不难对吧

.shadow{
	width: 200px;
	height: 200px;
	background:black;
	border-radius:10px;
	box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}

我们再利用foreignObject元素，通过这个元素，可以将 HTML嵌入到SVG中，轻松实现 dom转图片的效果。回到这里，我们仅需要将上面的结果放到foreignObject元素中，由于需要自适应尺寸，这里的body宽高都是100%

如下

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrap{
          box-sizing: border-box;
          margin: 0;
          height: 100%;
          padding: 10px;
        }
        .shadow{
          height: 100%;
          background:black;
          border-radius:10px;
          box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
        }
      </style>
      <div class="shadow"></div>
    </body>
  </foreignObject>
</svg>

在页面中打开保存图片即可

有了图片，我们就可以

.name{
  -webkit-mask: url('./matte_feather.svg')
}

当然我们可以不引入svg，这里推荐张鑫旭老师的SVG在线压缩合并工具，将这个转换一下，就有了上面那段代码，

当然这个阴影需要距离文字多远之类的各种尺寸数据，都是css调整的，或许你可以调整的更好

或者是用mask做一个Loading的图标

CSS嵌套语法 - Chrome112+

解释：如scss、less一般的嵌套css写法

常规写法下，选中a里面的b里面的c，需要这样写，即便是预处理器嵌套着写，最后生成的其实也是这样的代码

.parent {
  color: blue;
}

.parent .child {
  color: red;
}

而现在，css原生支持嵌套写法了

.parent {
  color: blue;

  .child {
    color: red;
  }
}
/* 上下两个是等价的，和预处理器的规则并不完全一样 */
.parent {
  color: blue;

  & .child {
    color: red;
  }
}

/* 没有嵌套的写法 */
.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}
/* 等价的无嵌套写法 */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

/* ============================== */

/* 新写法 */
.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}
/* 等价的新写法 */
.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

/* 没有嵌套的写法 */
.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}
/* 等价的无嵌套写法 */
.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

/* ============================== */

/* 新写法 */
.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}
/* 等价的新写法 */
.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

总结：嵌套类不加&符号会产生后代选择器。使用&符号可以改变这种结果。它明确显示了如何连接嵌套选择器

无效的嵌套示例

目前来看，css的嵌套写法还没有预处理器强大，但是胜在不用编译，以下的写法是无效的

.card {
  h1 {
    /* ❌如果里面是html标签选择器，则无效 */
  }
}

.card {
  & h1 {
    /* ✅有效 */
  }

  /* or */

  :is(h1) {
    /* ✅有效 */
  }
}

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

{{userData.name}}已认证