html - 带有图像和文本的圆角 Div

Question

我正在尝试创建一个包含 div 和文本的圆角的 div。我在尝试显示我的圆角时遇到问题，因为它似乎overflow:hidden;不起作用。

我正在阅读这篇文章，解释了图像和父 div 都需要position:static;，但是一旦我这样做了 .text 就不会出现在图像上方。

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