html - 向使用径向渐变创建的蒙版图像添加边框
问题描述
我有一个透明的径向渐变,我将其用作蒙版图像,以便在 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,
transparent 30px,
black 31px
);
}
<div>
</div>
推荐阅读
- java - 由于消息传递异常,尝试使用 javamail 运行 .jar 文件时出错
- sql - 查找同一系列中多次出现的最早和最晚日期
- node.js - 如何使用 fs.writeFile 添加新行?
- python-3.x - 使用 Pandas 和 Quandl 的多个字段
- python-3.x - 以下代码在 Mac Os X 中运行完美,但在 windows 和 raspberry os 中出现错误
- python-3.x - 如何在 Python 中附加单个字典键 (1_key : [N_values]) 的值列表?
- html - 图像网格未正确渲染
- javascript - javascript 类中的“SyntaxError:意外的标识符”
- reactjs - 在反应功能组件中定义功能的最佳方法?
- javascript - 「wds」:无效的配置对象。Webpack 已使用与 API 模式不匹配的配置对象进行初始化