如何解决如何在Chrome和其他Webkit浏览器中处理图像?
| 在Firefox中,如果我将图像放在元素中然后使用border-radius,则Firefox会裁剪图像,看起来很棒!在IE9中的工作方式相同(惊人!)。在Chrome浏览器(或任何Webkit浏览器)中,边框是圆形的,但不会裁剪图像,看起来很恐怖。我究竟做错了什么?border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
解决方法
放入
div
?
并分别设置样式。
http://jsfiddle.net/Stijntjhe/bFECN/1/
,我不认为该规范在这种情况下定义正确,因此有两种不同的结果。
当您没有填充时,WebKit会根据边界半径裁剪图像。请参阅:http://jsfiddle.net/bFECN/5/
但是,规范中没有任何内容表明填充也必须是半径图形的一部分。
,这个问题是一年多以前发布的,Webkit在图像的边框半径支持方面也存在同样的问题。因此,我用一个小技巧解决了这个问题,而不是使用CSS边框,而是使用双框阴影更改了方法。在你的情况下应该是这样的。
-webkit-box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 4px #bdbdbd;
-moz-box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 4px #bdbdbd;
box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 4px #bdbdbd;
border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。