渐变效果
线性渐变
值 | 说明 |
---|---|
to top | 从下到上渐变 |
to bottom | 从上到下渐变 |
to left | 从右到左渐变 |
to right | 从左到右渐变 |
to top left | 从右下方到左上方渐变 |
to top right | 从左下方到右上方渐变 |
to bottom left | 从右上方到左下方渐变 |
to bottom right | 从左上方到右下方渐变 |
语法顺序 :
{ background: linear-gradient( position, color1, color2, ... ); }
(渐变方向)(起始颜色)(结束颜色)
CSS Code :
{ background: linear-gradient( to right, tomato, yellowgreen); }
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置渐变效果</title>
<style type="text/css">
div{
width: 120px;
height: 120px;
display: inline-block;
text-align:center;
vertical-align: middle;
}
span{
width: 120px;
height: 120px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.top{
background: linear-gradient(to top,yellow,blue); //从下到上渐变
}
.bottom{
background: linear-gradient(to bottom,yellow,blue); //从上到下渐变
}
.left{
background: linear-gradient(to left,yellow,blue); //从右到左渐变
}
.right{
background: linear-gradient(to right,yellow,blue); //从左到右渐变
}
.topleft{
background: linear-gradient(to top left,yellow,blue); //从右下方到左上方渐变
}
.topright{
background: linear-gradient(to top right,yellow,blue); //从左下方到右上方渐变
}
.bottomleft{
background: linear-gradient(to bottom left,yellow,blue); //从右上方到左下方渐变
}
.bottomright{
background: linear-gradient(to bottom right,yellow,blue); //从左上方到右下方渐变
}
</style>
</head>
<body>
<div class="top"><span>微微一笑很倾城</span></div>
<div class="bottom"><span>微微一笑很倾城</span></div>
<div class="left"><span>微微一笑很倾城</span></div>
<div class="right"><span>微微一笑很倾城</span></div>
<div class="topleft"><span>微微一笑很倾城</span></div>
<div class="topright"><span>微微一笑很倾城</span></div>
<div class="bottomleft"><span>微微一笑很倾城</span></div>
<div class="bottomright"><span>微微一笑很倾城</span></div>
</body>
</html>
Result :
线性渐变是颜色沿着一条直线过渡,制作渐变效果,需要指定渐变方向
、起始颜色
、结束颜色
三个属性,属性之间用逗号
隔开。
径向渐变
径向渐变是圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合。在实际开发中,径向渐变并没有线性渐变广泛,所以在此不进行详解。
我寻见一片海 碧蓝且耀着光
大片船只航行其上 都向着远方
Shared by Foriver_江河