【凡哥教程第十六讲作业】夏日（CSS遮罩）

扬帆

特凉爽！谢谢花简静版主精彩分享

扬帆

花简静 发表于 2024-8-5 09:34
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Anda ...

富有创意！
请问版主：0  -147是如何确定的呀
可否再加个径向或锥形渐变呢

花简静

扬帆 发表于 2024-8-5 22:01
富有创意！
请问版主：0  -147是如何确定的呀
可否再加个径向或锥形渐变呢 ...

你看老师讲义中关于奖券那一部分的代码
<style>
.pic5 {
        mask: radial-gradient(circle, transparent 40px, red 42px, red 0) -237px 0 / 100% 100%;
        -webkit-mask: radial-gradient(circle, transparent 40px, red 42px, red 0) -237px 0 / 100% 100%;
}
</style>

<img class="pic5" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />

花简静

<style>
.qsfg16 {
        mask: repeat-radial-gradient(circle, transparent 3px, red 4px, red 0) -237px  0/ 100% 3%;
        -webkit-mask: radial-gradient(circle, transparent 3px, red 4px, red 0) -237px  0/ 100% 3%;
}
</style>
<img class="qsfg16" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />

这个是左右锯齿的。。237是宽度的一半。。

花简静

扬帆 发表于 2024-8-5 22:01
富有创意！
请问版主：0  -147是如何确定的呀
可否再加个径向或锥形渐变呢 ...

147是高度的一半，整出来是上下锯齿的

扬帆

花简静 发表于 2024-8-5 23:08
147是高度的一半，整出来是上下锯齿的

谢谢~我再学习一下

清梦

花简静 发表于 2024-8-5 09:35
清梦早啊

静静早，起床了吗

清梦

花简静 发表于 2024-8-5 09:36
清梦一起开心哈。。

好哒，一起开心并快乐着