Question

我正在尝试创建一个包含div和文本的圆角的div。我在试图让我的圆角显示出来时遇到了问题，因为overflow:hidden;似乎无效。

我正在读这个post，它解释了图像和父div都需要position:static;但是一旦我这样做了。文字没有出现在图像上方。

HTML：

<div class="span8 cell">
    <img src="http://www.placehold.it/400x200">    
    <div class="text">text</div>
</div>

CSS：

.cell {
    width: 400px;
    height: 100%;
    overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #000;
    -webkit-box-shadow: 0 1px 3px #000;
    box-shadow: 0 1px 3px #000;
    background: #e5e5e5;
    position: relative;
    margin: 30px;
}

.cell img { position: static; }

.cell .text{
    height: 100%;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    padding: 20px;
    text-align: left;
}?

Answer 1

在Chrome中，位于圆角顶部的任何元素也需要圆角。在这个例子中，你需要像这样围绕图像的角落：

.cell img {
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    position: static;
}

圆角转角与图像和文字

1 个答案: