CSS渐变

作者: Knight52033 | 来源:发表于2019-07-28 21:18 被阅读0次

css渐变分为:1.线性渐变(linear-gradient)

                          2.径向渐变(radial-gradient)

                          3.圆锥渐变(conic-gradient)

    其中线性渐变与径向渐变还可以使用repeating-linera-gradient、repeating-radial-gradient来创建重复渐变

一、线性渐变


基础线性渐变:要创建最基本的渐变类型,您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标,也可以指定任意数量。默认从上到下。

设置值将渐变的中心点移动到指定位置:

指定值改变渐变的方向:

对角线渐变:

设置渐变角度,精确控制渐变方向:

使用多种颜色的渐变:

多种颜色渐变设置渐变停止的位置:

在渐变颜色间创建实线(分割线):


两种对比效果:

支持背景堆叠和透明度:


渐变堆叠渐变:


重复线性渐变:

二、径向渐变

大致与线性类似。

三、圆锥渐变(不常见)


参考链接:

  MDN-使用css渐变

    菜鸟教程-css3渐变

    MDN-圆锥渐变

相关文章

网友评论

      本文标题:CSS渐变

      本文链接:https://www.haomeiwen.com/subject/jqoprctx.html