带有 CSS 设计的 jQuery 标签

Question

这是我想要达到的目标:

我的设计师给了我上线阴影、下线阴影和“曲线”。我不知道如何实现它们才能获得预期的结果。

谢谢

编辑:由于我无法在回复中添加图片，因此我正在编辑我的问题。我不认为 border-radius 和 shadow 可以让我到达那里。我已经走到这一步了...

还有什么想法吗？

编辑:这是 CSS:

height: 57px;
border: medium none;
top: 14px;
margin: 0px;
border-top-right-radius: 50px;
border-top-left-radius: 2px;

注意，我怎么没有在 2 个选项卡之间获得完整的“幻灯片”。

Answer 1

使用CSS实现曲线和阴影。

对于曲线

  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 

阴影

  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
   box-shadow:         3px 3px 5px 6px #ccc;

参数分别表示:

阴影的水平偏移量，正值表示阴影在框的右侧，负值表示阴影在框的左侧。

阴影的垂直偏移量，负数表示盒子阴影在盒子上方，正数表示阴影在盒子下方。

模糊半径(可选)，如果设置为0，阴影会很锐利，数字越大，越模糊。

传播半径(可选)，正值增加阴影的大小，负值减小大小。默认值为 0(阴影与模糊大小相同)。

颜色