如何解决为使用径向渐变创建的蒙版图像添加边框
我有一个透明的径向渐变,我将其用作蒙版图像,以便在div中“切出一个半圆形状的孔”。
我使用了透明的径向渐变,因为我希望“孔”成为实际的“孔”(意味着,我希望能够看到位于“ div”后面的内容)。
演示:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,transparent 30px,black 31px
);
}
<div>
</div>
如何在半圆形状上添加边框(让我们使用“ 2px纯黑色”)?
解决方法
使用相同的径向渐变添加渐变着色:
div {
width: 200px;
height: 200px;
background:
radial-gradient(
circle at center top,transparent 30px,black 30px 32px,green 33px
) border-box;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,black 31px
);
}
<div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。