Css 伪元素梯度

如何设计具有特定背景色的元素，然后在两侧使用相同背景色淡出（从背景色alpha 1到0的渐变）的伪元素（具有特定宽度）

我尝试了以下（）方法，但不完全有效：

<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>

.标签：后{
背景：-webkit渐变（线性、左上、右上、色挡（0%，rgba（8170,13,1））、色挡（100%，rgba（8170,13,0））；/*铬、Safari4+*/
宽度：20px；
内容:"--";；
显示：块；
}
.标签：之前{
背景：-webkit渐变（线性、左上、右上、色挡（0%，rgba（8170,13,0））、色挡（100%，rgba（8170,13,1））；/*铬、Safari4+*/
宽度：20px；
内容:"--";；
显示：块；
}
.标签{
背景色：rgba（8170,13,1）；
}
测试

---

我无法将渐变放置在基本元素的左/右位置，而不是顶部/底部，并且渐变仅在内容属性中定义了某个内容时显示（它需要为空）。

如果您放置例如

。label:before{margin top:-10px；}

您将看到渐变工作正常问题是它们下面有一个绿色背景
，因此有两种解决方案：

使伪元素从白色渐变为绿色（而不是透明->绿色）。

.标签：后{ 背景：-webkit渐变（线性、左上、右上、颜色停止（0%，rgb（8170,13））、颜色停止（100%，rgb（255255））；/*将0-alpha颜色更改为白色*/ 内容：''； /*float:left；*/*您不需要它*/ display:inline block；/*将在内部文本之后移动伪元素*/ } 或
2.将伪元素移到父元素之外

.label { margin: 0 30px; /*make some space for gradients */ } .label:before, .label:after { top: 0; bottom: 0; position: absolute; } .label:before { left: -30px; /* move the pseudo-element to the left */ } .label:after { right: -30px; /* move the pseudo-element to the right */ } .标签{ 边距：0 30px；/*为渐变留出一些空间*/ } .label:之前，.label:之后{ 排名：0； 底部：0； 位置：绝对位置； } .标签：之前{ 左：-30px；/*向左移动伪元素*/ } .标签：后{ 右：-30px；/*将伪元素向右移动*/

---

} 您需要将伪图元放置在跨度之外，否则无法正确看到它们（因为跨度背景遮住了透明度）

为此，请将其完全定位。（并使父位置：相对以便工作）并使用左、上和右属性：

.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;
}

.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;
}