如何创建具有少量透明末端的垂直线

Question

是否可以创建此绿线？

我尝试创建此div但结尾太过清晰

width: 100%;
height: 3px;
background: linear-gradient(#01f4e4, #01f4e4, transparent);
border-radius: 50%;

我在网站上使用图片，但我很好奇，如果可以用css完成。

Answer 1

您可以像这样使用3向渐变。查看this以获得创建它们的简便方法。

＆＃13;

＆＃13;

body {
    background:black;
    padding-top:100px;
}
div {
    margin:0 auto;
    display:block;
    width:300px;
    height:3px;
    background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, rgba(34,183,67,0.98) 50%, rgba(38,184,70,1) 51%, rgba(225,228,226,0) 99%, rgba(229,229,229,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(34,183,67,0.98) 50%,rgba(38,184,70,1) 51%,rgba(225,228,226,0) 99%,rgba(229,229,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(34,183,67,0.98) 50%,rgba(38,184,70,1) 51%,rgba(225,228,226,0) 99%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.75), rgba(255, 0, 0, 0));
}
hr {
    display: block;
    unicode-bidi: isolate;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
    margin: 50px 0 5px 0;
 }

<hr class="style-two">

你可以从

获得更多想法

此处http://css-tricks.com/examples/hrs/

Answer 3

使用完整的rgba颜色并定义渐变发生的点

body {
  background: black;
}

.line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(1, 254, 228, 0) 0%, rgba(1, 254, 228, 1) 20%, rgba(1, 254, 228, 1) 80%, rgba(1, 254, 228, 0) 100%);
}

<div class="line"></div>