我可以使用 css 或 html5 创建渐变线效果吗？答案

【问题标题】：Can I create gradient line effect with css or html5?我可以使用 css 或 html5 创建渐变线效果吗？
【发布时间】：2014-03-03 19:38:31
【问题描述】：

我不想为此使用图像。我想用css创建一条从透明到实线的线。我可以吗？像这样使用css3或html5；

【问题讨论】：

标签： html css gradient linear-gradients

【解决方案1】：

像这样：http://codepen.io/richbradshaw/pen/uexaG

.blurred-line {
  height:30px;
  width:600px;
  margin:0 auto;

  -moz-background-image: linear-gradient(to right, transparent 0%, black 100%);
  background-image: linear-gradient(to right, transparent 0%, black 100%);

  border-radius:15px;
  -webkit-filter:blur(1px);
}

呈现如下：

尽管大多数人似乎认为，渐变语法才是真正的语法，并且适用于 Firefox 10+、Chrome 26+、IE10+ 和 Safari 6（或 7？）+。

包含所有古老的渐变是浪费时间，除非您计划支持不存在的浏览器（例如 Chrome 10、Firefox 3.6）。

【讨论】：

【解决方案2】：

我建议您使用带边框半径的水平线性渐变，例如：

border-radius:50px;
background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);

请参阅此jsfiddle 或下面的 sn-p 了解更多详细信息。

.rounded {
    height:50px;
    width:80%;
    
    border-radius:50px;
    background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -moz-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

&lt;div class="rounded"&gt;&lt;/div&gt;

有一个我非常喜欢的渐变生成器，因为它提供了名为“Ultimate CSS Gradient Generator”的跨浏览器解决方案。

【讨论】：

【解决方案3】：

使用 rgba 格式

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
)

一个例子：http://nicolahibbert.com/css3-alpha-transparent-gradients/

重复：CSS3 Transparency + Gradient

这个工具也可能有用：http://www.colorzilla.com/gradient-editor/

【讨论】：

【解决方案4】：

正如你所说的“从透明到实心”，这应该是你想要的：

HTML

<div class="container">
<div class="gradient">
</div>
</div>

CSS

div.container {
    width: 500px;
    height: 30px;
    /*background-color: #791;*/ /*uncomment this property to see the transparency effect*/
    padding: 10px;
}
div.gradient {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1)); /* use vendor specific property if the standard one does not work */
    border-radius: 25px;
}

【讨论】：

【解决方案5】：

您可以使用 CSS3 做到这一点，如果您希望它看起来像您提供的图像，您可以使用一些透明度和边框半径。我总是觉得this link 很有帮助：

【讨论】：