深入了解 linear-gradient 线性变化
linear-gradient 变化默认是从上到下的变换,如果需要其他方向的变换,则需要专门指定.渐变的方向有两种表示方法,一种使用关键字 to 表示方位,另外是直接使用角度值.关键字比较好理解,比如 top,bottom,left,right.但是角度相对来说理解起来有点难度,下面着重来讲解下角度在线性渐变的使用
线性角度是啥
线性角度指的是:以图形的中心点做水平方向的线段,再以中心点做出一条线,与水平线生成的角度叫做线性角度,线性角度线和图形最远的的距离叫做开始点,另外一端称为结束点
image.png
- 注意:在 linear-gradient 函数中,其中的百分比的说的是开始点到结束点的距离,而不是图形的百分比.如果后面的渐变断点的小于前面渐变断点的值,那么后面的渐变断点会按照前面渐变断点的位置开始计算.数值也是线性线段的数值.CSS 渐变无法实现过渡效果.
实例:关于线性角度和开始点 结束点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.linear {
width: 200px;
height: 400px;
border: 1px solid palegoldenrod;
/* background: purple; */
background-image: linear-gradient(45deg,white 100px,red 100px 200px,white 200px);
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
