没有边框图像的CSS褪色边框？答案

【问题标题】：css fading borders without border-image?没有边框图像的CSS褪色边框？
【发布时间】：2010-10-11 20:41:17
【问题描述】：

有没有人知道仅使用 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);
}

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

【问题讨论】：

"css-only 方法" 如"无图像"？
“css-only”，如“由 css 以编程方式生成，不使用 url()”（甚至是 data-urls）

标签： css border gradient

【解决方案1】：

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

background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#777777), to(#777777), color-stop(.10,#FFFFFF),color-stop (.90,#FFFFFF))

【讨论】：

【解决方案2】：

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

另一种解决方案是将每个菜单项放在一个跨度内，并在该跨度上具有渐变背景。然后需要扩展菜单项以填充跨度，使其看起来像菜单项周围有边框。便宜而且有点老套，但它很管用。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：