![](/img/trans.png)
[英]Chrome bug: border-radius + border with same color as background -> artifacts
[英]border-radius in Chrome bug?
我在chrome中的border-radius有问题,这是我的代码:
img{
border-radius: 24px;
border: 2px solid #c7c7c7;
-moz-border-radius:24px;
-webkit-border-radius: 24px;
}
在mozzila它工作正常,但在铬它看起来很有趣......在mozzila我可以看到一个与我的图像接壤的圆圈,但在铬上圆圈裁剪边框,我只能看到直线
截图: http : //postimage.org/image/27turq0mc/
你能帮我吗?
这可能是一个铬虫。 一个解决方案可能是使用div
包装img
并生成以下css:
img{
-moz-border-radius:24px;
-webkit-border-radius: 24px;
border-radius: 24px;
display:block;
}
div {
border: 2px solid #c7c7c7;
border-radius: 24px;
-webkit-border-radius: 24px;
width:40px; /* the width of image */
height:40px; /* the height of image */
}
演示: http : //jsfiddle.net/EnmMp/1/
我有同样的问题和解决方案提供:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
解决了这个问题。
首先,它显示了仅使用CSS3和HTML的解决方案,然后使用JQuery呈现解决方案。
而不仅仅是下面的边框代码
-moz-border-radius: 2px 2px 15px 15px;
对于从左上角开始顺时针应用的半径,此刻您无法对Webkit执行此操作。 所以你必须像长手一样把它写出来:
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
尝试在背景图像上而不是在html img元素上进行,因为一些img元素不适用于边界半径(但我猜)。
div.something{
background-image:url(something.png);
border-radius: 24px;
border: 2px solid #c7c7c7;
border-radius: 24px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.