边框颜色不显示边框半径答案

【问题标题】：Border color doesn't show with border-radius边框颜色不显示边框半径
【发布时间】：2021-03-22 01:45:16
【问题描述】：

当同时使用响应式时，边框颜色在移动设备上不显示似乎在移动分辨率测试的桌面上很好。

这是来自 iPod 的屏幕截图：

这是 CSS 代码：

.box img {
    display: block !important;
    margin-top: 8px;
    border: 1px solid #CCC;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

边框颜色仅出现在诺基亚 Lumia 920 上

我可以尝试什么来解决这个问题？

【问题讨论】：

你能提供你的 HTML 吗？
这是一个 webkit 错误。使用 box-shadow 临时修复。
@SonuJoshi 我认为您的估值是正确的。清楚地使用盒子阴影:)。删除边框然后添加-webkit-box-shadow: 0px 0px 0px 1px #CCC; -moz-box-shadow: 0px 0px 0px 1px #CCC; box-shadow: 0px 0px 0px 1px #CCC;

标签： html css cross-browser responsive-design

【解决方案1】：

这是 -webkit 错误。通过我从@SonuJoshi 获得临时解决方案的方式仍然没有找到确切的解决方案，即删除添加box-shadow 而不是border

旧代码

.box img {
    display: block !important;
    margin-top: 8px;
    border: 1px solid #CCC;

    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

新代码

.box img{
    overflow: hidden;
    margin-top: 8px;

    -webkit-box-shadow: 0px 0px 0px 1px #CCC;
       -moz-box-shadow: 0px 0px 0px 1px #CCC;
            box-shadow: 0px 0px 0px 1px #CCC;

    -webkit-border-radius:6px;
       -moz-border-radius:6px;
        border-radius:6px;
}

感谢大家的帮助:)

【讨论】：

【解决方案2】：

在图像的容器中应用这个 css 而不是图像...

.box{
display: inline-block;
margin-top: 8px;
border: 1px solid #CCC;

-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}

.box img { width:100%; margin-bottom:-1px; }

【讨论】：

你的意思是把block改成inline-block？
图像变大时显示为display: inline-block;

【解决方案3】：

代码将是

.box img { width:100%; margin-bottom:-1px; }

【讨论】：