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的解释为通过遮罩或者裁切特定区域的图片的方式,来隐藏一个元素的部分或者全部可见区域。
比如我有两个图,要遮罩的图必须要有缝隙,不让无法透过前面的图看到后面的背景,我这里的第二个图就是背景透明的
CSS新用法 - mask、CSS嵌套语法
<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");
}
一个基本的效果

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

我们有这样一张图片,现在需要在上面加上文字,由于背景复杂导致文字边缘很难看清,继而导致了文字的易读性并没有那么好
CSS新用法 - mask、CSS嵌套语法
这时我们可能会想到使用backdrop-filter 加一个毛玻璃效果
CSS新用法 - mask、CSS嵌套语法
一个矩形的毛玻璃效果显然非常突兀,因为可以明显感知到div和背景的边界,这时候我们就可以利用mask做一个羽化效果
CSS新用法 - mask、CSS嵌套语法
这里mask后面的url是什么呢,其实是一个图,一个用css绘制的图
CSS新用法 - mask、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) {
    /* ✅有效 */
  }
}

 

给TA打赏
共{{data.count}}人
人已打赏
技术教程

html标签的lang属性写法

2024-6-3 11:46:02

技术教程

Vscode,Prettier,ESLint配置及注释

2024-6-3 14:08:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索