没有边框图像的css褪色边框？

是否有人知道一种仅使用css的方法（css3很好，但最好没有边框图像以防万一）来设置活动选项卡的样式，如以下对话框的工具栏（忽略图标）：

我使用jquery ui生成选项卡，这意味着标记类似于：

<div class="tabbed">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">...</div>
    ...
</div>

---

那么，我如何在不使用边界图像的情况下获得梯度边界呢？如果我确实需要边框图像，它可以使用多个css渐变作为其内容吗？

最简单的解决方案可能是只制作一些达到相同效果的图像，然后将它们用作背景图像

---

另一种解决方案是将每个菜单项放置在一个范围内，并在范围上具有渐变背景。然后需要扩展菜单项以填充范围，使其看起来像菜单项周围有边框一样。价格便宜，有点老套，但效果不错。

CSS3梯度通常作为图像处理

对于在简单元素背景上使用渐变，应该将渐变声明为背景图像，而不仅仅是背景颜色

---

尝试在边框图像上应用相同的规则。但请记住，到目前为止，大多数浏览器（甚至包括Opera和Chrome）对边框图像的支持都很差。

为什么不使用中等不透明度的渐变背景图像呢。类似的东西应该可以工作（除了用rgba替换十六进制颜色-用中间alpha）

---

背景图片：-webkit渐变（线性，0%0%，100%0%，从（#777777）到（#777777），颜色停止（.10，#FFFFFF），颜色停止（.90，#FFFFFF））

试试这个：

框阴影：0 0 15px 3px灰色；

框阴影：0 15px强度颜色；如“无图像”中的“仅css方法”如“仅css”中的“仅css”“由css以编程方式生成，无需使用url（）”（甚至数据url）

.ui-tabs-nav {
    background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a7a7a7)) repeat-x; padding:1px 4px;
}
.ui-tabs-nav li.ui-tabs-selected {
    border-width:0 1px; border-color:transparent rgba(0,0,0, 0.30) !important; padding:1px 0;
    background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, 0)), color-stop(0.5, rgba(0,0,0, 0.1) ), to(rgba(0,0,0, 0))) repeat-x !important;
}
.ui-tabs-nav li.ui-tabs-selected > a {
    border-width:0 1px; border-color:transparent rgba(0,0,0, 0.15);
}