javascript - 如何用css实现一条直线渐变效果-PHP中文网问答

javascript - 如何用css实现一条直线渐变效果

黄舟 2017-04-11 13:13:42

[JavaScript讨论组]

616

如下图的效果如何通过css来实现：

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(5)

伊谢尔伦2017-04-11 13:15:42 5楼

.grad{
    background: defultColor;
    background: -moz-linear-gradient(top, topColor, bottomColor);
    background: -webkit-gradient(linear, left top, left bottom, from(topColor), to(bottomColor));
}

赞 +0

添加回复

PHPz2017-04-11 13:15:42 4楼

使用背景色颜色渐变应该可以做到

background: -webkit-gradient(linear, 0% 0%, 100% 0%,from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));

赞 +0

添加回复

PHP中文网2017-04-11 13:15:42 3楼

多看手册多看手册多看手册

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hi013z左右方向渐变</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(251, 251, 251, 0.09),rgba(251, 251, 251, 0.59),#FFF); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(251, 251, 251, 0.09),rgba(251, 251, 251, 0.59) ,#FFF); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,rgba(251, 251, 251, 0.09),rgba(251, 251, 251, 0.59) ,#FFF); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(251, 251, 251, 0.09)rgba(251, 251, 251, 0.59), ,#FFF); /* 标准的语法（必须放在最后） */
    height: 6px;
}
#body{

background: #579f23;
}
</style>

</head>
<body id="body">

<p id="grad1"></p>

</body>
</html>

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

赞 +0

添加回复