边框颜色不显示border-radius

Question

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

这是从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上

请让我知道任何人都知道解决方案。 提前谢谢

Answer 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;
}

感谢所有帮助:)

Answer 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; }

Answer 3

代码将是

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