mask开孔实例

马黑黑

有一个需求：在一块 600*300 的长方形开 3*3 的内孔、孔直径40px，边缘对应开半圆凹槽，四个角切四分之一圆。

这个用 mask 很容易做到，先看效果：

代码：

<style>
#mydiv {
	margin: 20px auto;
	width: 600px;
	height: 300px;
	background: tan;
	-webkit-mask:  radial-gradient(circle, transparent 20px, red 21px) center/25% 25%;
}
</style>

<div id="mydiv"></div>

南无月

标准的洞洞板制作过程。。

南无月

跟之前那个一生所爱实现在手法不一样。。。认真学习比较中。

红影

25%就是1/4，发现1/2也是，而1/5时，边缘上不会有孔。好像有点感受。

红影

我要赶紧再去复习radial-gradient了，没看懂transparent 20px, red 21px，去试了一下，把red 21px变为red 0px也是这样效果。

红影

我知道了，之前对transparent在mask里的运用没理解透，再回去看1001，大概知道是怎么回事了

马黑黑

红影 发表于 2024-7-22 20:43
我要赶紧再去复习radial-gradient了，没看懂transparent 20px, red 21px，去试了一下，把red 21px变为red 0 ...

red 21 变为 0px 实际上是等同于酱紫：

transparent 20px, red 0

这表示，红色紧接着透明色。这样挖出的孔是有毛边的，刺手，所以设计为 red 21px，让他有一个过渡。实际3d打印时，为了确保精准，我们会做其他技术处理。

马黑黑

红影 发表于 2024-7-22 20:53
我知道了，之前对transparent在mask里的运用没理解透，再回去看1001，大概知道是怎么回事了

遮罩 mask 的原理：遮罩图像透明的，其下的源图像不显示，反之显示，所以遮罩用的渐变颜色无关紧要，只要不是透明的就好。有时候，需要模糊呈现源图的，可以考虑rgba，因为它的alpha通道可控。

马黑黑

南无月 发表于 2024-7-22 18:40
跟之前那个一生所爱实现在手法不一样。。。认真学习比较中。

也许得出的结果一样（但实际上也不一样），但是实现的原理不一样

马黑黑

南无月 发表于 2024-7-22 18:29
标准的洞洞板制作过程。。

这就是阿三需要的apple底板

南无月

马黑黑 发表于 2024-7-22 21:04
也许得出的结果一样（但实际上也不一样），但是实现的原理不一样

好哒，虽然看上去差不多，原理不同结果也不同。。继续找不同中。。

南无月

马黑黑 发表于 2024-7-22 21:04
这就是阿三需要的apple底板

马黑黑

南无月 发表于 2024-7-22 22:43

谢大咖

马黑黑

南无月 发表于 2024-7-22 22:40
好哒，虽然看上去差不多，原理不同结果也不同。。继续找不同中。。

红影

马黑黑 发表于 2024-7-22 21:03
遮罩 mask 的原理：遮罩图像透明的，其下的源图像不显示，反之显示，所以遮罩用的渐变颜色无关紧要，只要 ...

这个讲解清晰，终于搞明白了

红影

马黑黑 发表于 2024-7-22 21:00
red 21 变为 0px 实际上是等同于酱紫：

transparent 20px, red 0

原来弄个20+1，增加一点点是防止毛边的啊。虽然肉眼看不出什么区别，但知道了

竹溪

这些洞洞还是均匀排布的。

马黑黑

竹溪 发表于 2024-7-23 09:18
这些洞洞还是均匀排布的。

必须均匀

马黑黑

红影 发表于 2024-7-22 23:31
原来弄个20+1，增加一点点是防止毛边的啊。虽然肉眼看不出什么区别，但知道了

没有这个设置，毛边是很明显的，除非你的显示器是拼多多上买的

马黑黑

红影 发表于 2024-7-22 23:29
这个讲解清晰，终于搞明白了