如何使图像边框均匀？

Question

我为图像添加了1个像素边框。同时我试图给图像边缘半径。 我的问题是因为图像已经使用photoshop进行了舍入，边缘的边缘看起来比它应该更薄

你可以从这里查看。

http://jsfiddle.net/fVNgA/

如何使边框均匀？

img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }
<img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>​

Answer 1

将图片包裹到span并向其添加css

http://jsfiddle.net/96wVp/

Answer 2

添加“填充：1px;”图像样式：）

顺便说一下，这是另一个概述类似问题的主题，原因是：CSS 3 border-radius property; corners too pale in Chrome?

Answer 3

Chrome使用方形边角作为内边框。因此，在Chrome中，您无法获得精确的感觉，就像在Firefox中一样，即使是内边框也使用圆角。

Chrome和Firefox中的屏幕截图

我的建议是，最好包含通用border-radius，而且对于Chrome，修补程序会添加overflow: hidden;和padding: 1px;。

<强> CSS

img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; /* Add this for fallback */
    overflow: hidden; /* Hack for Chrome */
    padding: 1px; /* Hack for Chrome */
    border: 1px solid #000;
}

Chrome Hack之后

Answer 4

问题不在于它的应用方式和你正在使用的图像的边界。尝试在Photoshop中以6px半径对角进行四舍五入，并将其保存为具有透明背景的png。发生的事情是你正在放置边框，然后边框实际上是在图像的角落下移动。由于你的图像是jpg和jpg不支持透明度，你的圆角实际上有方形的白色角落。以下是使用透明图像而非jpg的图像示例。 http://jsfiddle.net/calder12/fVNgA/6/

代码只是因为他们不会让我发布没有代码的小提琴...有时它是有意义的＆gt;。＆gt;

<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }    </style>
<img src='http://calderonline.com/images/home_pic1.png'>​