1

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

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

你可以在jsFiddle上找到一个例子

正如您所看到的，它在 Firefox 上正确，但在 chrome 和 safari 上却没有。任何帮助，将不胜感激。

4

3 回答 3

1

dablet.com 上的演示

border-radius不是因为position: absolute;on继承的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。如果您不支持 Firefox 3.6 ，则不再 需要-moz-前缀border-radius

根据这个已回答的问题，这种行为是一个错误：

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

唯一的方法是将图像设置为background-image元素的aborder-radius并使用background-position. 通过来自 css-tricks 讨论线程的Chris Coyier

于 2012-06-13T07:51:45.057 回答
1

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

于 2012-06-13T09:24:40.740 回答
0 
.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/

于 2012-06-13T08:16:13.183 回答