Question

有没有人知道一个只有css的方法（css3很好，但最好没有border-image以防万一）来设置活动标签的样式，如下面对话框的工具栏（忽略图标）：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。

background-image：-webkit-gradient（线性，0％0％，100％0％，从（＃777777）到（＃777777），颜色停止（.10，＃FFFFFF），颜色停止（0.90，＃FFFFFF））

Answer 2

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

另一种解决方案是将每个菜单项放在跨度内并在跨度上具有渐变背景。然后需要扩展菜单项以填充跨度，使其看起来像菜单项周围的边框。便宜又有点hacky但它确实有效。

Answer 3

CSS3渐变通常作为图像处理。

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

尝试在border-image上应用相同的规则。但请记住，截至目前，大多数浏览器都支持边框图像（甚至是Opera和Chrome）。

Answer 4

试试这个：box-shadow: 0 0 15px 3px gray; box-shadow: 0 0 15px strength color;

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

4 个答案: