使用CSS创建渐变线条

Question

使用CSS创建渐变线条

cssgradientlines

3

如果我想创建类似于AT＆T下拉菜单上看到的分隔菜单项的渐变线，如何实现呢？我想在我编写的菜单上创建类似的效果，并且我不想使用图像。是否有一种方法可以在CSS中实现这一点？非常感谢您的帮助！谢谢。

- KateG

1

你能否发布一个链接或一张图片？ - Vitim.us

你能展示一下你的HTML代码吗？最好是你已经开始的部分，这样我们就能看到你卡住的地方了。 - G-Cyrillus

5个回答

1

您可以创建一个宽度为1像素的div，然后在其上应用渐变。就像这样：

.line{
    width:1px;
    height : 25px;
    margin : 0 5px;

    background: rgb(125,185,232);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );

}

Fiddle: http://jsfiddle.net/jPnXz/

这里有一个CSS渐变生成器（我用它来制作CSS）：http://www.colorzilla.com/gradient-editor/

- Karl-André Gagnon

1

CSS3渐变的优秀文档

渐变生成器

- Vitim.us

0

对于这个问题，您也可以使用repeating-gradient：

http://codepen.io/anon/pen/zbLkl

  background:repeating-linear-gradient(
    top , 
    white 0, 
    white 1em,
    turquoise 1em,
    turquoise  1.2em) 0  2.4em;

    line-height:1.2em;

设置相等的行高以使渐变跟随字体大小。

挖掘它的时间，一个关于正方形和背景大小的旧例子。http://dabblet.com/gist/4750827

background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;

- G-Cyrillus

0

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px; 
    background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>

<h1>Linear Gradient</h1>


<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>

- sakthi sudhan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek Story · Accepted Answer

Microsoft CSS Gradient 是一个可视化工具，你可以使用它。只需要将CSS复制到你的代码中：

例如：

#div {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}