Javascript 引导选项卡中的CSS阴影和圆角

是否有任何css黑客来弥补这个图像下面的引导导航标签标记？有带阴影的圆角吗

红色
红-红-红-红

橙色
橙橙橙

黄色的
黄黄黄

试试这样的方法

CSS:

---

在这里，我提供了一个完整的示例来创建带有圆形边框的引导选项卡面板

$（函数（）{
$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
})
});
html{
保证金：20px 10px自动；
字体系列：arial，无衬线；
} 
.导航：之后，
导航：以前{
内容：“；
显示：表格；
} 
.导航：之后{
明确：两者皆有；
溢出：隐藏；
}
.导航{
缩放：1；
左边距：20px；
垫底：3件；
}
李国荣先生{
列表样式：无外无；
浮动：左；
位置：相对位置；
}
.nav.active{
z指数：3；
}
李海军:以前,，
李海军：之后，
.海军a:以前，
.导航a:之后{
内容：“；
位置：绝对位置；
底部：0；
}
.导航a{
浮动：左；
填充：10px 40px；
文字装饰：无；
颜色：#fff；
背景：rgb（97142,70）；
边界半径：5px5px0；
-webkit变换：透视（30）旋转（10度）；
}
.nav.active a{
背景#F66599；
颜色：#BE3569；
-webkit变换：透视（30）旋转（10度）；
}
.导航a:以前{
左：-20px；
}
.导航a:之后{
右：-20px；
}
.导航激活：在，
.导航激活：在{
z指数：1；
背景#F66599；
}
李海军：第一个孩子a：以前，
李海军：最后一个孩子{
背景色：#fff；
}
.选项卡内容{
背景：rgba（60,118,61,0.17）；；
颜色：#4444；
填充：20px；
}
.选项卡窗格{
显示：无；
}
.tab-pane.active{
显示：块；
}







主页
公文包页面
消息页
设置页
没有“黑客”，您只需重新设置默认引导导航选项卡的样式即可。特别是查看
导航选项卡上的
边框底部
。给它一些阴影。重新设置样式
nav tabs>li>a
，为其提供背景色、一些阴影等。如果您能向我们展示您为添加阴影所做的尝试，我们可能会进一步提供帮助。我不确定“hacks”是否真的是你想要的……只是合适的CSS。@nationalholiday谢谢你的评论，但我已经预料到了，并且考虑了很多次，我应该怎么做才能在纯CSS中创建这种类型的布局，但是如果你仔细观察图像，阴影和标签倾斜在使用CSS实现时相当复杂
.nav-tabs{
      box-shadow: 0px 0px 10px #777;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
      -webkit-transform: perspective(30) rotateX(10deg);
}