没有边框图像的CSS淡化边框？

Question

有没有人知道一种纯 css 方法(css3 很好，但最好没有边框图像以防万一)来设置事件选项卡的样式，如以下对话框的工具栏(忽略图标):coda preferences on snow leopard

我正在使用 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>

在我有更好的方法之前，我一直按如下方式设置样式(所有 ui-tabs-* 类都是由 jQ-UI 选项卡插件自动生成的):

.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);
}

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

Answer 1

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

背景图像:-webkit-gradient(线性，0% 0%，100% 0%，从(#777777)，到(#777777)，颜色停止(.10，#FFFFFF)，颜色停止(.90,#FFFFFF))