边界半径包装中的绝对定位图像

Question

我有一个边框半径的包装器。在包装器内部，我在右上角有一个绝对定位的图像。我的问题是图像不会在具有边框半径的包装器下裁剪/隐藏。我试过溢出：隐藏在包装器上，但它不起作用。见下图。

Answer 1

图片标记不受border-radius的影响。

最好的办法是将图片用作背景：

<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>

元素（在上面的示例中为div）应包含实际图像的大小），除非您使用CSS3，否则无法像<img>标记

那样调整图像大小

Answer 2

您可以为边框使用单独的绝对定位<div>，以便您可以将边框放置在绝对定位的图像上方。例如：

<div id="wrapper">
    <div id="inner">
        <img id="i" width="75" height="75" src="http://placekitten.com/75/75">
    </div>
    <div id="border"></div>
</div>

还有一些CSS（仅限WebKit边界半径属性，剩下的只留给读者练习）：

#wrapper {
    position: relative;
}

#inner {
    margin: 2px; /* Make room for the border */
    width: 200px;
    height: 200px;
    position: relative;
}

#border {
    -webkit-border-radius: 5px;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

#i {
    position: absolute;
    top: 0;
    right: 0;
}

通常的例子：http://jsfiddle.net/ambiguous/6e622/

<div id="border">肯定是一个黑客攻击（我觉得它有点脏了）但也许它会对你有用。