css - 如何防止不透明边框继承元素的背景颜色?
问题描述
我创建了一个带有不透明背景和不透明边框的 DIV。问题是我将边框的基色设置为黑色,但它仍然从 DIV 继承了红色背景。
我的演示片段:
.elem {
height: 30px;
width: 50px;
background-color: rgba(255, 30, 0, 0.5);
border: 5px solid rgba(0, 0, 0, 0.2);
}
<div class="elem"></div>
我预期的结果 - 边框不透明且黑色(独立)。我如何实现这一目标?
解决方案
您需要考虑background-clip
:
.elem {
height: 30px;
width: 50px;
background-color: rgba(255, 30, 0, 0.5);
background-clip: padding-box;
border: 5px solid rgba(0, 0, 0, 0.2);
}
<div class="elem"></div>
推荐阅读
- python - 在抽搐聊天中选择聊天框?硒
- arrays - 按 int 值 Bash 排序字符串数组的问题
- python - 如何使用 Python 更改终端的颜色
- css - 可排序的 xsl,用于运行 HTML
- powershell - 使用 Get-DnsServerStatistics 计算每秒 DNS 查询数的正确方法是什么?
- kubernetes - 如何通过 helm 模板使用 kubernetes 密封的秘密
- blazorise - 使用 Blazorise 将工具栏最后一个元素向右对齐
- node.js - @google-cloud/iot API 有真实的文档吗?
- python - 抓取时如何解决Python字符串超出范围
- c++ - 为什么我的 C++ 应用程序消耗太多系统资源而没有响应?