4

我正在为我的网站创建一些选项卡，并且我正在尝试匹配设计，该设计使用了一些非常不均匀的线条，这显然很难在 css 中实现。这是一个示例：

标签

现在我正在使用引导选项卡来实现选项卡的实际功能。这是我的开始

http://jsfiddle.net/PJbhQ/2/

.nav-tabs > li > a{

   box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
   background-image:linear-gradient(to bottom, #fefefe, #dddedd);
  border-bottom: none;
}
.nav-tabs > li.active > a {
   box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
   color: @gray;
   background: #ffffff;
   border-bottom: none;
 }

关于如何获得这种曲率的任何想法？

4

1 回答 1

3

好的，这是我使用纯 CSS 进行的非常粗略的尝试。

这是小提琴：http: //jsfiddle.net/PJbhQ/4/

这是CSS：

.nav-tabs > li > a{

    box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
    background-image:linear-gradient(to bottom, #fefefe, #dddedd);
    //border-bottom-color: transparent;
    border-radius: 8px 20px 0 0;
    border-bottom: none;
}
.nav-tabs > li > a:after{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 14px, #999 17px, #dddedd 18px);
    background-origin: padding-box;
    background-position: left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "null";
    color:rgba(0,0,0,0);
    height: 20px;
    left: 31px;
    position: relative;
    top: 8px;
    width: 20px;
    z-index: 5;
}

.nav-tabs > li.active > a {
    box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
    color: @gray;
    background: #ffffff;
    border-bottom: none;
}   
.nav-tabs > li.active > a:after{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 14px, #999 17px, #fff 18px);
    background-origin: padding-box;
    background-position: left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

（HTML和JS是一样的）

从Inset border-radius with CSS3中可以看出，我对凸曲线使用了渐变

希望这可以帮助！:)

于 2013-07-16T11:40:24.660 回答