html - webkit 浏览器不继承圆 Angular

Question

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

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

您可以在 jsFiddle 上找到示例

如您所见，它在 firefox 上运行正常，但在 chrome 和 safari 上运行不正常。任何帮助将不胜感激。

Answer 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 cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.”

唯一的方法是将图像设置为 background-image元素的 border-radius并将其定位为 background-position .通过Chris Coyier来自 css-tricks 讨论 thread