css - 使用 rgba 值时的抗锯齿边界半径问题
问题描述
我遇到了一个问题,当我将边框半径与 rgba 值的颜色结合使用时,比如让我们说 rgba(255,255,255,.8)
,然后使用 abox-shadow
在某种程度上使盒子看起来像羽毛一样,我得到的问题是角不实心,如图所示。
可以看出,当使用边框半径与其他 CSS 元素结合使用时,边缘会在设置边框半径时产生奇怪的透明边缘。
我已经尝试了很多但没有太大成功,这是一个代码尝试,因为我想为另一个项目尝试这个但只是在这里简单地复制它:https ://jsfiddle.net/01u7gbxa/1/
代码本身可以应用于任何对象,因此它似乎解析为相同的结果:
background:rgba(0,0,0,.8);
box-shadow:0 0 15px 30px rgba(0,0,0,.8);
border-radius:60px;
有谁知道这是否可以解决?
提前感谢您提供更多信息。
解决方案
您可以使用模糊滤镜执行相同的操作。将其应用于伪元素以不影响任何潜在内容
body {
background: #f00;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border-radius: 60px;
position: relative;
}
.box:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: rgba(0, 0, 0, .8);
border-radius: inherit;
filter: blur(10px);
}
<div class="box"></div>
推荐阅读
- java - 如何使用 Java 中的 Graphics2D 对象创建具有混合模式的矩形?
- r - 无法使范围缩放功能正常工作
- c++ - 如何修复分段错误:C++ 中的 11?
- ios - 未能在设备上构建 swift ios 应用程序
- java - 以特定格式乘、除数字
- python - model.predict(),model.predict_classes() 和 model.predict_on_batch() 似乎没有产生任何结果
- javascript - 如何在较大的项目出现在顶部后停止按钮移动
- .net - 如何为适用于多种环境 [ Dev、QA、Prod ] 的控制台应用程序配置 CI?
- python - 使图像中的对象彼此最接近
- python - pytorch中cuda张量的位操作