4

我为图像添加了 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'>​
4

4 回答 4

3

将图像包装成 aspan并添加css到其中

http://jsfiddle.net/96wVp/

于 2012-10-24T10:54:31.177 回答
1

添加“填充：1px；” 到图像样式:)

顺便说一句，这里有另一个线程概述了类似的问题，原因是：CSS 3 border-radius 属性；Chrome 中的角落太苍白？

于 2012-10-24T10:47:31.813 回答
1

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 黑客攻击之后

于 2012-10-24T10:47:54.417 回答
1

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

代码只是因为他们不会让我在没有代码的情况下发布小提琴......有时这很有意义>。>

<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }    </style>
<img src='http://calderonline.com/images/home_pic1.png'>​
于 2012-10-24T10:52:54.463 回答