Html CSS中带圆角的选项卡式结构

我有一个CSS矩形，有圆角。我想在上面添加一个选项卡式结构

这就是我所说的。

我试着制作两个不同的元素，加上定位，但它看起来不真实（主要是因为阴影）。我们可以在单个元素上使用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;  
}

---

我想调整/拉伸顶部，使其看起来像。

为什么不使用像bootstrap或jqueryui这样具有选项卡功能的预先打包的东西呢？我能理解，如果你想建立自己的东西，但也许你想要一个捷径

引导：

jquery用户界面：

---

有很多这样的软件包可以帮助您开发ui，但这是两个常见的软件包

为什么不使用像bootstrap或jquery ui这样具有选项卡功能的预打包软件包呢？我能理解，如果你想建立自己的东西，但也许你想要一个捷径

引导：

jquery用户界面：

有许多这样的软件包可用于帮助您的ui开发，但有两个常见的软件包

请尝试以下代码

<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的大小，则可以将其用作背景属性，这意味着您可以在实际div中包含文本

试试这段代码

<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的大小，则可以将其用作背景属性，这意味着您可以在实际div中包含文本

---

您可以使用：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;
}

傅先生{
宽度：200px；
高度：100px；
边框：4px实心#000；
利润上限：24px；
位置：相对位置；
-webkit边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
傅：以前{
显示：块；
高度：20px；
宽度：30px；
边框：4px实心#000；
边框底宽：0；
内容：“；
位置：绝对位置；
左：0；
顶部：-24px；
背景：#fff；
-webkit边框左上半径：5px；
-webkit边框右上角半径：5px；
-左上角moz边界半径：5px；
-moz边框半径右上角：5px；
边框左上半径：5px；
边框右上角半径：5px；
}

您可以使用：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;
}

傅先生{
宽度：200px；
高度：100px；
边框：4px实心#000；
利润上限：24px；
位置：相对位置；
-webkit边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
傅：以前{
显示：块；
高度：20px；
宽度：30px；
边框：4px实心#000；
边框底宽：0；
内容：“；
位置：绝对位置；
左：0；
顶部：-24px；
背景：#fff；
-webkit边框左上半径：5px；
-webkit边框右上角半径：5px；
-左上角moz边界半径：5px；
-moz边框半径右上角：5px；
边框左上半径：5px；
边框右上角半径：5px；
}

您能至少向我们展示一下您的尝试吗？它可能只需要一个小的调整，你能至少告诉我们你已经尝试了什么吗？它可能只需要稍作调整，jqueryui看起来是更好的选择。谢谢真棒，jQueryUI看起来是更好的选择。谢谢只需将代码复制并粘贴到一个新的html文件中进行测试，当您自定义实际页面时，请确保div的大小与图像的大小相同。实际上，问题在于阴影。如果我使用图像，那么我必须在手之前添加阴影。只是尽量少用图像。不管怎样，谢谢你上次编辑后添加了CSS，所以我的解决方案现在不是，但我稍后会再看。只需将代码复制并粘贴到一个新的html文件中进行测试，而且在自定义实际页面时，请确保将div的大小与图像的大小相同。实际上，问题在于阴影。如果我使用图像，那么我必须在手之前添加阴影。只是尽量少用图像。不管怎样，谢谢。自从上次编辑以来，你已经添加了CSS，所以我的解决方案现在不是，但我稍后会再看。这就是我一直在寻找的。谢谢您的签名，谢谢！这就是我要找的。谢谢您的签名，谢谢！