html - 怎么设置1px的边框渐变？

Question

如何给左边框的线条设置渐变？或者怎么做到图中的样式？
如下图：

Answer 1

用css3属性，

    .border li:before {
        content: "";
        float: left;
        display: block;
        width: 1px;
        height: 50px;
        background: -webkit-linear-gradient(green, white, green);
        background: -moz-linear-gradient(green, white, green);
        background: linear-gradient(green, white, green);
    }

详见demo

Answer 2

html:

<p class="g">
    <p>bla</p>
</p> 

css:

.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
padding: 1px;
}

.g > p { background: #fff; }

Answer 3

看你的网站就是要支持ie了。 那你只能用1px的p加bgi了