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;
}

<击> PS。如果您不是supporting Firefox 3.6，则-moz-不再需要border-radius前缀

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

“Webkit无法处理儿童和孙子的边界半径裁剪+。这很糟糕。如果你想要边框裁剪，它必须直接放在图像所在的div上，而不要在层次结构中更深入。“

唯一的方法是将图片设置为background-image元素的border-radius，并将其定位为background-position。来自css-tricks discussion Chris Coyier

的thread

Answer 2

.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/

Answer 3

您好，您可以通过在班级 .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/

圆角不在webkit浏览器中继承

3 个答案:

demo on dablet.com