关于css:CSS-mask-与-切图艺术

109次阅读

共计 5707 个字符，预计需要花费 15 分钟才能阅读完成。

欢送关注我的公众号：前端侦探

作为一名 CSSer，我并不拥护“切图”。

相同，有些中央还是更举荐的，特地是那些奇形怪状的 UI，正当的“切图”能够极大地提高布局效率，当然，这里须要一点点技巧，将“切图”和 CSS 现有能力联合起来，一起学习一下吧

一、“切图”的局限性

传统的“切图”简略暴力，但往往短少适应性。

适应性个别有两种，一是 尺寸自适应 ，二是 色彩能够自定义。

举个例子，有这样一个优惠券款式

对于这类款式实现技巧，之前在这篇文章中有具体介绍：

CSS 实现优惠券的技巧

不过这里稍微不一样的中央是，两个凹陷处都是平滑解决的

单纯实现内凹圆角曾经很吃力了，当初还来个平滑圆角？是时候祭出最初大招了 – 切图。

然而，切图真的能解决吗？假如曾经失去了这样一张图片

div{background: url(a.png) 0/100% 100%;
}

上面是这张图片在不同尺寸下的体现

除非整个布局的尺寸是齐全固定的，否则都会有不同水平的拉伸状况，这是视觉最为禁忌的。

另外，整张图是固定的，也无奈间接批改背景色，如果有多种状态，还须要保留多份

.div1{background: url(a.png) 0/100% 100%;
}
.div2{background: url(b.png) 0/100% 100%;
}

有没有更为灵便的切图形式呢？

二、图形运算与 CSS MASK

常常会和设计稿打交道，对设计软件（Photoshop、Figma 等）应该或多或少也有所理解了，这里简略介绍一下图形运算（也称布尔运算），通常有 4 种类型

这是一个十分常见的设计技巧，能够将不同的图形通过运算合成新的图形。

上面是一个经典案例，就是通过圆的布尔运算绘制的

这么好的个性，CSS 中有相似的吗？

这就不得不提到 CSS mask 了，CSS MASK 能够指定一张图作为遮罩图片。

div{mask: url(图片);
  mask: 突变;
}

遮罩图片能够是图片，也能够是突变。次要原理是显示遮罩图片不通明的局部，通明的则会被裁剪，示意如下

然而，很多状况下，繁多的遮罩并不能满足需要，比方这样一个带缺口的圆，繁多的突变可能无奈绘制

因而，咱们须要用到和设计中图形布尔运算一样的技巧。

这和 CSS mask 中的 mask-composite 是一一对应的

/* Keyword values */
mask-composite: add; /* 叠加（默认）*/
mask-composite: subtract; /* 减去，排除掉下层的区域 */
mask-composite: intersect; /* 相交，只显示重合的中央 */
mask-composite: exclude; /* 排除，只显示不重合的中央 */

利用这个个性，能够很轻易的合成带缺口的圆，也就是说，咱们能够应用 CSS 的形式自在的去裁剪、合成咱们想要的图形。

另外，-webkit-mask-composite 与规范下的值有所不同，属性值十分多，如下

-webkit-mask-composite: clear; /* 革除，不显示任何遮罩 */
-webkit-mask-composite: copy; /* 只显示上方遮罩，不显示下方遮罩 */
-webkit-mask-composite: source-over; /* 默认值，失常的叠加，等同于 add */
-webkit-mask-composite: source-in; /* 只显示重合的中央，等同于 intersect*/
-webkit-mask-composite: source-out; /* 只显示上方遮罩，重合的中央不显示，等同于 subtract*/
-webkit-mask-composite: source-atop; /* 只显示下方遮罩 */
-webkit-mask-composite: destination-over; /* 失常叠加 */
-webkit-mask-composite: destination-in; /* 只显示重合的中央 */
-webkit-mask-composite: destination-out;/* 只显示下方遮罩，重合的中央不显示 */
-webkit-mask-composite: destination-atop;/* 只显示上方遮罩 */
-webkit-mask-composite: xor; /* 只显示不重合的中央，等同于 exclude*/

其实是借用了 Canvas 中的图形合成属性，并且辨别了图层程序，然而对于遮罩层来讲，其实 只须要关注遮罩的形态，不要关注图层的色彩，所以上述的一些值成果是完全相同的。

这里能够先不必每个都了解，晓得有下面 4 种类型就行了，其实能够一一去试验，等相熟了天然就晓得每个属性的具体用处了。

上面是每个属性的演示

https://codepen.io/xboxyan/pen/RwKbGwN

理解了这些，接下来看看在切图中的利用。

三、圆滑的内凹圆角

回到后面的问题，同样是切图，不过咱们须要换一种形式。

仔细观察，从整体反向思考，其实就是一个失常的圆角矩形，而后挖去两个平滑的缺口，两个缺口的大小是固定的，地位也是绝对不变的，如图所示彩色的局部

所以上面的问题就是，如何来失去这两个缺口？

单纯 CSS 突变是难以绘制的，所以这里能够间接“切图”。然而设计稿上给的是红色局部，如何去手动做一个缺口局部呢？

这就略微借助设计工具了，这里以 Figma 为例，咱们绘制一个矩形，居右对齐，确保能够笼罩缺口（如下，蓝色局部）

而后，将蓝色矩形图层放在原图形上面

最初，选中这两个图形，执行减去顶层

实现！！

用同样的形式，能够失去左右两个半圆，或者间接翻转一下也行

接下来，咱们须要将这两个 svg 转为内联，举荐用张鑫旭老师的这个

SVG 在线压缩合并工具

最初，咱们应用 3 层遮罩，两个半圆加上整个矩形，通过遮罩合成（仅显示不重叠局部）就能够失去咱们须要的图形了

这样做的益处是两个半圆 是通过 CSS 定位实现 的，所以能够确保肯定是居中、凑近边缘的，不会因为尺寸的变动而变形。

上面是残缺代码

coupon{
  width: 300px;
  height: 150px;
  border-radius: 8px;
  background: linear-gradient(85deg, #FF9078 7.57%, #FA3440 80.06%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20'height='48'viewBox='0 0 20 48'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M0 48V0c0 2.21 1.809 3.958 3.974 4.395C13.116 6.238 20 14.315 20 24S13.116 41.762 3.974 43.605C1.81 44.042 0 45.791 0 48z'fill='%23000'/%3E%3C/svg%3E") 0 50%/20px no-repeat,
    url("data:image/svg+xml,%3Csvg width='20'height='48'viewBox='0 0 20 48'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M20 48V0c0 2.209-1.809 3.959-3.975 4.395C6.885 6.238 0 14.315 0 24s6.885 17.762 16.025 19.605C18.191 44.041 20 45.791 20 48z'fill='%23000'/%3E%3C/svg%3E") 100% 50%/20px no-repeat,
    linear-gradient(red 0 0);
  -webkit-mask-composite: xor;
}

这样就失去了尺寸自适应、可更换色彩的优惠券款式了

你也能够拜访在线链接

  • CSS coupon (codepen.io)’)

四、投票 PK 款式

上面来看这样一个例子

留神，这里也是有平滑圆角的，并且在宽度扭转时，倾斜角是固定的

同样，也能够用“切图”的形式来实现这样的成果

在这里，咱们还是从整体思考，将图形补全，用图形合成的形式，在 Figma 中绘制出如下的“平滑直三角”

而后在 CSS 中通过 mask 减去彩色局部就行了，上面是残缺代码

.pk{
  display: flex;
  width: 400px;
}
.item{height: 40px;}
.left{
  width: 50%;
  border-radius: 40px 0 0 40px;
  background: linear-gradient(85deg, #FF9078 7.57%, #FA3440 80.06%);
  -webkit-mask: linear-gradient(red,red), url("data:image/svg+xml,%3Csvg width='16'height='40'viewBox='0 0 16 40'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M16 0h-2.344a1 1 0 0 1 .957 1.287L3.855 37.148A4 4 0 0 1 .023 40H16V0z'fill='%23C6F'/%3E%3C/svg%3E") right/auto 100% no-repeat;
  -webkit-mask-composite: xor;
}
.right{
  flex: 1;
  border-radius:  0 40px 40px 0;
  background: linear-gradient(274deg, #5FB6F5 -3.81%, #4B80EE 62.98%);
  -webkit-mask: linear-gradient(red,red), url("data:image/svg+xml,%3Csvg width='16'height='40'viewBox='0 0 16 40'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M0 40h2.344a1 1 0 0 1-.957-1.287L12.145 2.85A4 4 0 0 1 15.977 0H0v40z'fill='%23C6F'/%3E%3C/svg%3E") left/auto 100% no-repeat;
  -webkit-mask-composite: xor;
}

这样实现的倾角反对突变，反对自适应宽度，成果如下

你也能够拜访在线链接

  • CSS PK (codepen.io)’)

五、平滑 tab 款式

最初再来看一个例子：平滑 tab 标签，就是 Chrome 标签栏那样的

其实对于这个布局，之前也专门写过文章，介绍了 5 种不同形式，有趣味的能够回顾一下

CSS 实现 Chrome 标签栏的技巧

这次再来介绍一个比较简单、实用的“切图”形式。

通过后面两个例子，可能你曾经猜到要怎么做了。没错，就是先补全

而后在设计软件中将彩色局部独自“切”进去

而后在 CSS 中通过 mask 减去这两局部彩色局部就行了，和第一个例子十分像，上面是残缺代码

tab{
  line-height: 40px;
  padding: 0 30px;
  background-color:royalblue;
  color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='28'height='40'viewBox='0 0 28 40'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M28 0H0v40h1c8.283 0 15-6.717 15-15V12c0-6.627 5.373-12 12-12z'fill='%23000'/%3E%3C/svg%3E") 0 0 no-repeat,
    url("data:image/svg+xml,%3Csvg width='28'height='40'viewBox='0 0 28 40'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M0 0h28v40h-1c-8.283 0-15-6.717-15-15V12C12 5.373 6.627 0 0 0z'fill='%23000'/%3E%3C/svg%3E") 100% 0 no-repeat,
    linear-gradient(red 0 0);
  -webkit-mask-composite: xor;
}

这样实现的 tab 既做到了自适应宽度，也能随便更改背景，成果如下

你也能够拜访在线链接

  • CSS chrome tab (codepen.io)’)

六、总结一下

以上就是本文的全部内容了，介绍了一种非凡的“切图”手法，将切图与 CSS MASK 联合起来，既保留了“切图”的简略暴力，又满足了 CSS 自适应的特点，上面简略总结一下

  1. 传统的“切图”简略暴力，但往往短少适应性：尺寸自适应和色彩自适应
  2. 图形布尔运算次要有：合并形态、减去顶层、穿插形态、排除重叠
  3. CSS MASK composite 刚好也有雷同的个性
  4. 能够从整体反向思考，将难以实现的局部由“切图”实现，而后通过 mask 从整体减去这一部分
  5. 因为缺口局部是通过 CSS 定位实现，因而能够确保整体的自适应性

前端作为设计师和开发工程师之间的桥梁，很多实现都能够从设计的角度去思考，很多简单的成果或者布局也是一层一层叠加而成，也算是给前端提供的一种布局思路。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

正文完
css
发表至： css
2023-09-25
 0
关于css:你所不知道的BFC
关于css:快速学会Flex布局核心知识
关于sass:Sass-循环语句
关于css:如何用纯-CSS-实现酷炫的霓虹灯效果