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

时间：2014-03-03 19:38:31

标签： css html5 css3 gradient linear-gradients

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

enter image description here

5 个答案:

答案 0 :(得分：0)

使用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/

答案 1 :(得分：0)

像这样：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);
}

呈现如下：

enter image description here

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

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

答案 2 :(得分：0)

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

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

有关详细信息，请参阅此jsfiddle或以下代码段。

.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%);
}
<div class="rounded"></div>

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

答案 3 :(得分：0)

正如你所说＆＃34;从透明到坚固＆＃34; ，这应该是你想要的：

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

答案 4 :(得分：-2)

您可以使用CSS3执行此操作，如果您希望它看起来与您提供的图像一样，则可以使用一些透明度和border-radius。我总是发现this link有帮助：

相关问题
最新问题