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

【问题标题】：Absolute positioned image in border radius wrapper边界半径包装器中的绝对定位图像
【发布时间】：2011-09-02 10:11:54
【问题描述】：

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

【问题讨论】：

标签： css

【解决方案1】：

图像标签不受边框半径的影响。

最好的办法是使用图片作为背景，例如：

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

元素（在上面的例子中是一个div）应该包含实际图像的大小），除非你使用CSS3，否则图像不能像<img>标签那样调整大小

【讨论】：

这很可能是问题所在，尽管实际上它取决于浏览器：一些浏览器会裁剪前景图像，而另一些则不会。
@Spudley：我认为问题在于弯曲的边框会撞击内容框的内部，而非弯曲的边框完全位于内容框之外，因此不会出现这个问题。即使边框不是，内容框（以及剪裁）仍然是矩形的。这是有道理的还是我的思维被疲劳弄糊涂了？
@mu 太短了，我不知道 Spudley，但我很困惑。 :P
AFAIK，内容被绘制在内容框内，边框围绕内容框。一个弯曲的角落必须稍微吃进内容框（矩形）；那么，在顶部绘制的内容将覆盖弯角的内部。
@Spudley，那会是哪个浏览器？

【解决方案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"> 肯定是一个 hack（我觉得想出它有点脏）但也许它对你有用。

【讨论】：