带有圆角的CSS中的结构

Question

我有一个带圆角的CSS矩形。我想在它上面添加一个像结构一样的标签。

这就是我所说的。 http://i.imgur.com/J2h0Ncm.png

我尝试制作两个不同的元素并加上定位，但它看起来并不真实（主要是因为阴影）l。我们可以在CSS上使用单个元素吗？

提前致谢！

编辑（更多细节）：

我有一个带圆角边框的矩形如下：

#mybox
{
width: 800px;
height:400px;
border:thin;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;   
border-color:black;
box-shadow: 3px 3px 10px 5px #000;  
}

我想调整/拉伸顶部看起来像this。

Answer 1

试试这段代码......

<div style="width: 93px; height: 72px;">
  <div style="width: 93px; height: 13px; background-image: url('tabtop.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
  <div style="width: 93px; height: 59px; background-image: url('tabbottom.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
</div>

以下图片...... 如果你将div设置为图像大小你应该没问题，并将它们用作BACKGROUND属性意味着你可以在实际的div中使用文本

Answer 2

为什么不使用像bootstrap或jquery ui这样具有标签功能的预先打包的东西？我能理解你是想建立自己的东西，但也许你想要一条捷径？

bootstrap：http://twitter.github.com/bootstrap/

jquery ui：http://jqueryui.com/

有许多此类软件包可用于帮助您进行ui开发，但这些是两种常见的软件包

Answer 3

您可以使用：before选择器来创建您要求的内容。

这是一个快速实现，可以让您了解如何使用它：

<div class="foo"></div>

.foo {
    width: 200px;
    height: 100px;
    border: 4px solid #000;
    margin-top: 24px;
    position: relative;
    -webkit-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.foo:before {
    display: block;
    height: 20px;
    width: 30px;
    border: 4px solid #000;
    border-bottom-width: 0;
    content: " ";
    position: absolute;
    left: 0;
    top: -24px;
    background: #fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}