<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title>制作各类渐变线条</title>
<link rel="stylesheet" href="./line.css"/>
</head>
<body>
<div class="line-one">
灰色线条
</div>
<p>
很好的缩放,用了calc() 动态计算定位
</p>
<div class="line-two">
<span>white line</span>
</div>
<p>
Github式彩色渐变线条,下面是放大后线条
突变式渐变
</p>
<div class="line-three">
Beautiful ones
</div>
<div class="line-four">
Beautiful ones
</div>
</body>
</html>
body{
font-family:"Helvetica";
}
.line-one{
width:100%;
height:100px;
position:relative;
box-sizing:border-box;
padding:20px;
}
.line-one::after{
position:absolute;
width:100%;
height:1px;
content:"";
display:block;
background-image:linear-gradient(to right,white,black,white);
left:0;
bottom:0;
transform:scaleY(0.5);
}
/*文字居中,2边加线条,一种常见的设计*/
.line-two{
margin-top:10px;
width:100%;
height:100px;
position:relative;
box-sizing:border-box;
padding:20px;
background-color:#212433;
color:white;
line-height:60px;
text-align:center;
}
.line-two::after{
position: absolute;
width: 30%;
height: 1px;
content: "";
display: block;
background-image: linear-gradient(to right,#212433,white); /*使用to 可以很好的兼容*/
left: calc(20% - 42px); /*宽度30% 左偏移20%可以居中线条,但是减去文字的宽度,这里细心调整,缩放后距离仍然一致*/
left: -moz-calc(20% - 42px);
left: -webkit-calc(20% - 42px);
bottom: 50%;
transform: scaleY(0.5);
}
.line-two::before{
position: absolute;
width: 30%;
height: 1px;
content: "";
display: block;
background-image: linear-gradient(to left,#212433,white);
left: calc(50% + 42px);
left: -moz-calc(50% + 42px);
left: -webkit-calc(50% + 42px);
bottom: 50%;
transform: scaleY(0.5);
}
/**/
.line-three{
width:80%;
padding:10%;
height:20px;
position:relative;
}
.line-three::after{
position:absolute;
left:0;
bottom:0;
content:"";
display:block;
width:100%;
height:1px;
transform:scaleY(0.5);
background-image: linear-gradient(to right,
#b8e1ff 33.3333%,
#fcd2c5 33.3333%,
#fcd2c5 66.6666%,
#e0c5eb 66.6666%);
}
.line-three::before{
position:absolute;
left:0;
bottom:-20px;
content:"";
display:block;
width:100%;
height:10px;
transform:scaleY(0.5);
background-image: linear-gradient(to right,
#b8e1ff 33.3333%,
#fcd2c5 33.3333%,
#fcd2c5 66.6666%,
#e0c5eb 66.6666%);
}
.line-four{
width:80%;
padding:10%;
height:20px;
position:relative;
}
.line-four::before{
position:absolute;
left:0;
bottom:-20px;
content:"";
display:block;
width:100%;
height:10px;
transform:scaleY(0.5);
background-image: linear-gradient(to right,
#b8e1ff 0%,
#fcd2c5 50%,
#e0c5eb 100%);
}
另外补充一个小知识点:
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
角度是顺时针的
例如:background-image:linear-gradient(0deg,red,blue) 从下到上的 由红色变为蓝色
background-image:linear-gradient(90deg,red,blue) 从左到右的 由红色变为蓝色
跨浏览器实施渐变
这里包含了所有前缀的渐变设置。
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}