作者:mobiledu2502887683 | 来源:互联网 | 2020-08-15 13:47
css3linear-gradient()可以通过指定渐变线为直线,然后沿该线放置几种颜色来创建的线性渐变。我们可以通过创建无限画布并使用垂直于渐变线的线条绘制图像来构建图像,画线的颜色是两条相交的渐变线的颜色。
本篇文章给大家介绍的是css中linear-gradient()可以干什么?linear-gradient()的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
此示例直观地说明了如何根据上述规则计算梯度线。这显示了渐变线的起点和终点,以及由具有背景的元素产生的实际渐变。
请注意,尽管起点和终点在框之外,但它们的位置精确地正确,因此渐变在角落处为纯白色,而在相反角落处为纯黑色。这是有意的,这对于线性渐变总是正确的。
渐变线的长度(起点和终点之间)公式为:
abs(W * sin(A)) + abs(H * cos(A))
说明:
1、在定义渐变线方向的角度(在任何象限中)时,使得0度向上指向,正角度表示顺时针旋转,
2、W表示渐变框的宽度,
3、H表示渐变框的高度,
渐变的色标通常被放置在连接起点和结束点的梯度线上,但这不是必需的:该渐变线在可以在两个方向上无限延伸。起点和终点仅仅是任意位置标记,在指定颜色停止时定义0%,0px等位置的起点,终点定义100%所在的位置。颜色停止允许在0%之前或100%之后具有位置。
通过找到穿过垂直于渐变线的该点的唯一线来确定任何点处的线性渐变的颜色。点的颜色是此线与其相交的点处的渐变线的颜色。
线性渐变示例
示例一:指定基本垂直渐变的各种方法
linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);
示例二:在梯度中使用角度
请注意,尽管角度与角点之间的角度并不完全相同,但渐变线的大小仍然是正确的,以使渐变黄色恰好位于左上角,蓝色恰好位于右下角。
linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);
总结:以上就是本篇文章关于linear-gradient()--线性渐变的全部内容,希望能对大家的学习有所帮助。
以上就是css中linear-gradient()可以干什么?linear-gradient()的使用的详细内容,更多请关注 第一PHP社区 其它相关文章!