[英]Border color doesn't show with border-radius
The border color doesn't show on mobile when using responsive at the same time seems to be fine at desk with mobile resolution testing.使用响应式同时使用移动设备时,边框颜色不会显示在移动设备上,在桌面上使用移动分辨率测试似乎没问题。
Here is the screen shot from iPod:这是 iPod 的屏幕截图:
Here is the CSS code:这是CSS代码:
.box img {
display: block !important;
margin-top: 8px;
border: 1px solid #CCC;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Border color appear only on Nokia Lumia 920边框颜色仅在诺基亚 Lumia 920 上出现
What can I try to resolve this?我可以尝试什么来解决这个问题?
It is -webkit bug.这是 -webkit 错误。 Still didn't find exact solution by the way I got temporary solution from @SonuJoshi which is remove add
box-shadow
instead of border
通过我从@SonuJoshi 获得临时解决方案的方式仍然没有找到确切的解决方案,即删除添加
box-shadow
而不是border
Old code旧代码
.box img {
display: block !important;
margin-top: 8px;
border: 1px solid #CCC;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
New code新代码
.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;
}
Thanks for all help :)感谢所有帮助:)
Apply this css in container of the image not the image...将此 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; }
代码将是
.box img { width:100%; margin-bottom:-1px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.