Webkit 浏览器中未继承的圆角答案

【问题标题】：rounded corners not inherited in webkit browsersWebkit 浏览器中未继承的圆角
【发布时间】：2012-06-13 07:45:09
【问题描述】：

我正在开发某种在线 indesign 编辑器，但遇到了以下问题。我在我的页面上放置了一个绝对位置的 div，并且在那个 div 中我放置了一个图像，也是一个绝对位置，因为我希望能够在 div 内拖动图像。我在 div 上设置了边框半径，但图像不继承该半径。

当我删除 div 和图像上的 position:absolute 属性时，边框半径被接受。但我需要它们绝对定位。

你可以在jsFiddle找到一个例子

如您所见，它在 Firefox 上运行良好，但在 chrome 和 safari 上却不行。任何帮助将不胜感激。

【问题讨论】：

标签： html css webkit

【解决方案1】：

罢工>

demo on dablet.com

border-radius 没有被继承，因为position: absolute; 在img 上

CSS：

.pageelement {
    top:136.583px;
    left:-7.087px;
    height:288.142px;
    width:574.417px;
    position: absolute;
}

.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position: absolute;
}

.pageelement,
.pageelement img {
    -webkit-border-radius: 0px 12px 12px 0px;
            border-radius: 0px 12px 12px 0px;
}

附言。如果你不是supporting Firefox 3.6，你就不需要-moz-前缀border-radius了

据此回答question，此行为是一个错误：

“Webkit 无法处理子孙+的边框半径裁剪。就是这么糟糕。如果你想要边框裁剪，它必须直接在放置图像的 div 上，而不是深入到层次结构中。”

这样做的唯一方法是将图像设置为带有border-radius 的元素的background-image，并使用background-position 定位它。通过 Chris Coyier 来自 css-tricks 讨论 thread

【讨论】：

不幸的是，这没有用，你没有使用溢出隐藏属性，我需要隐藏我的图像部分超出 div 边界
首先，它可以工作（image），其次，使用overflow: hidden;，您不仅可以隐藏图像的其他部分，还可以隐藏图像的圆角。我认为你必须重组你的标记或重新表述你的问题。
我知道你的意思，但奇怪的是它可以在 Firefox 上运行。所以我猜这更有可能是一个 chrome 错误。
@vincent 在我看来这是一个 webkit 错误，我在回答中添加了一些参考
我找到了另一种使用background-image而不是使用image标签的方法

【解决方案2】：

您好，您可以通过在您的类 .pageelement img

中定义 z-index 属性来获得所需的结果

希望对你有帮助........

HTML

<div class="pageelement">
   <img src="http://placehold.it/350x150">
</div>

CSS

.pageelement {
    top:136.583px;
    left:-7.087px;
    height: 288px;
    width: 593px;
    position:absolute;
    overflow: hidden;
    -webkit-border-radius: 0px 12px 12px 0px;
    -moz-border-radius: 0px 12px 12px 0px;
    border-radius: 0px 12px 12px 0px;
    border:5px solid red;
}
.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position:absolute;
    z-index:-10;

}

查看演示：- http://jsfiddle.net/hTVFR/21/

【讨论】：

【解决方案3】：

.pageelement {
    top:136.583px;
    left:-7.087px;
    height:288.142px;
    width:574.417px;
    overflow: hidden;
    position: relative;
}
.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position: absolute;
}

.pageelement, .pageelement img {
    -webkit-border-radius: 0px 12px 12px 0px;
    -moz-border-radius: 0px 12px 12px 0px;
    border-radius: 0px 12px 12px 0px;        
}

不幸的是pageelement的位置绝对是你麻烦的原因。删除它应该可以完成这项工作！

http://jsfiddle.net/hTVFR/3/

【讨论】：

你没有像 vincent 所说的那样隐藏溢出，这对他的布局非常重要，我的代码中的 .pageelement 不是绝对定位的！