Question

我需要用一条在两端都有渐变的线来强调我的元素（菜单项）。它不能简单地是图形（甚至是拉伸的图形），因为元素的宽度可能显着变化。

期望的效果：

Desired effect

我做的是创建一条宽1000px的线，两端都有渐变，然后将HTML <div><div class="right"> </div></div>追加到每个要加下划线的元素。 CSS正在关注

        #navmenu li div
        {               
            height: 1px;
            background-image: url('images/1000glight.png');
            background-repeat: no-repeat;                                       
        }


        #navmenu li div.right
        {
            width:35px;
            float: right;
            background-position: -965px 0;              
            background-image: url('images/1000glight.png');
            background-color: #212121;
        }

然而，这不是真正的阿尔法。我需要指定“右侧”div的背景颜色，以“覆盖”下面的图像（1000px线）。

任何想法如何才能改进它，保持纯CSS？

Answer 1

使用与此类似的方法，渐变是包裹div的背景图片，padding-bottom仅显示背景的下半部分：

<div class="wrap">
    <div class="content">Some Text!</div>
</div>

和CSS：

.wrap {
    float: left;
    padding-bottom: 5px;
    /* IE10 */ 
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);

/* Opera */ 
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}

.content {
    background-color: #fff;
}

可以，但是省略了IE＆lt; 10;这可能适用于某种过滤器，但在我发布之前需要更多阅读。

JS Fiddle demo of current implementation

不幸的是，DX.transform选项似乎无法允许上面使用的多个停靠点，参考：Simulating color stops in gradients for IE

所以，也许你必须使用IE＆lt; 10的背景图像回退，这远远不够理想。

Answer 2

使用border-image gradient CSS3。

div {
    width:200px;
    border-style:solid;
    border-width:15px;
    text-align: center;
    -webkit-border-image: 
           -webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}

Demo here。

这仅适用于Webkit浏览器（Chrome，Safari等）。应该有一些供应商特定的等价物。

Answer 3

你可以使用带有CSS3渐变的空div ...在这里查看预设：http://www.colorzilla.com/gradient-editor/ - 当然你必须改变渐变的方向。我对此类问题使用了很多。它是图像的绝佳替代品。

CSS技巧：在两端使用alpha渐变下划线

3 个答案: