css - 伪元素上的渐变

Question

如何设计一个具有特定背景颜色的元素，然后在两侧伪元素(具有特定宽度)具有相同背景颜色淡出(从背景颜色 alpha 1 到 0 的渐变)？

我已经尝试了以下 ( http://plnkr.co/edit/MobgBy5xyJHv7z839jSA?p=preview ) 但它并不完全有效:

<style>
    .label:after {
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,1)), color-stop(100%,rgba(8,170,13,0))); /* Chrome,Safari4+ */
        width: 20px;
        content: ' -- ';
        display: block;
    }

    .label:before {
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,0)), color-stop(100%,rgba(8,170,13,1))); /* Chrome,Safari4+ */
        width: 20px;
        content: ' -- ';
        display: block;
    }

    .label {
        background-color: rgba(8,170,13,1);
    }
</style>

<span class="label">test</span>

我无法让渐变位于基本元素的左/右而不是顶部/底部，并且渐变仅在内容属性中定义了某些内容时显示(它需要为空)。

Answer 1

你需要将你的伪元素定位在span之外，否则它们无法被正确看到(因为透明度被span背景遮住了)

为此，让它们绝对定位。 (并使父 position: relative 使其工作)并使用 left、top 和 right 属性:

.label {
    background-color: rgba(8,170,13,1);
    color: white;
    float: left;
    padding: 5px;
    font-family: Arial, sans-serif;
    position: relative;
    margin: 0px 15px;
}

.label:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,0)), color-stop(100%,rgba(8,170,13,1))); /* Chrome,Safari4+ */
    width: 20px;
    content: '';
    display: block;
    position: absolute;
    right: 100%;
    height: 100%;
    top: 0px;
}

.label:after {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,1)), color-stop(100%,rgba(8,170,13,0))); /* Chrome,Safari4+ */
    width: 20px;
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    height: 100%;
    top: 0px;
}

demo