mask开孔实例
本帖最后由 马黑黑 于 2024-7-22 18:21 编辑 <br /><br /><style>#mydiv {
margin: 20px auto;
width: 600px;
height: 300px;
background: tan;
-webkit-mask:radial-gradient(circle, transparent 20px, red 21px) center/25% 25%;
}
</style>
<p>有一个需求：在一块 600*300 的长方形开 3*3 的内孔、孔直径40px，边缘对应开半圆凹槽，四个角切四分之一圆。</p>
<p><br></p>
<p>这个用 mask 很容易做到，先看效果：</p>
<p><br><br></p>
<div id="mydiv"></div>
<p><br>代码：<br></p>
<div class="hE"><pre>
<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>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> {:4_170:}标准的洞洞板制作过程。。 跟之前那个一生所爱实现在手法不一样。。。认真学习比较中。 25%就是1/4，发现1/2也是，而1/5时，边缘上不会有孔。好像有点感受。 我要赶紧再去复习radial-gradient了，没看懂transparent 20px, red 21px，去试了一下，把red 21px变为red 0px也是这样效果。{:4_173:} 我知道了，之前对transparent在mask里的运用没理解透，再回去看1001，大概知道是怎么回事了{:4_187:} 红影 发表于 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底板
{:4_190:} 南无月 发表于 2024-7-22 22:43
谢大咖 南无月 发表于 2024-7-22 22:40
好哒，虽然看上去差不多，原理不同结果也不同。。继续找不同中。。
{:4_190:} 马黑黑 发表于 2024-7-22 21:03
遮罩 mask 的原理：遮罩图像透明的，其下的源图像不显示，反之显示，所以遮罩用的渐变颜色无关紧要，只要 ...
这个讲解清晰，终于搞明白了{:4_187:} 马黑黑 发表于 2024-7-22 21:00
red 21 变为 0px 实际上是等同于酱紫：
transparent 20px, red 0
原来弄个20+1，增加一点点是防止毛边的啊。虽然肉眼看不出什么区别，但知道了{:4_187:} 这些洞洞还是均匀排布的。 竹溪 发表于 2024-7-23 09:18
这些洞洞还是均匀排布的。
必须均匀 红影 发表于 2024-7-22 23:31
原来弄个20+1，增加一点点是防止毛边的啊。虽然肉眼看不出什么区别，但知道了
没有这个设置，毛边是很明显的，除非你的显示器是拼多多上买的{:4_170:} 红影 发表于 2024-7-22 23:29
这个讲解清晰，终于搞明白了
{:4_190:}
页:
[1]
2