line-gradient 之渐变角度


  MDN上对于linear-gradient的定义如下:

  CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。

  在css中渐变就是backgroundbackground-image,也就是说,使用背景图像的css属性都适合渐变。下边我重点记录下渐变角度。

  

  注:图来自于https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html

  MDN对于渐变角度的定义:to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。

  如上图所示,我们平时要写的角度就是上图中的A的值,渐变线方向为to right top,也就是从左下方渐变到右上方,注意那条虚线,它是过渐变容器(图中矩形)中点的垂线,注意:虚线的的位置是不变的(在你改变渐变角度的时候,实际上就是渐变线绕着C点在旋转),虚线和渐变线方向的角度就是渐变角度,等于图中的A的值45度。

  参考资料:

  你真的理解CSS的linear-gradient

  深入理解CSS3 gradient斜向线性渐变

  mdn  linear-gradient

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM