2023年政策修订增补工作正在进行中，欢迎参与！
  • Moegirl.ICU：萌娘百科流亡社群 581077156（QQ），欢迎对萌娘百科运营感到失望的编辑者加入！
  • Moegirl.ICU：账号认领正在试运行，有意者请参照账号认领流程。

User:JackBlock/渐变色使用

萌娘百科，万物皆可萌的百科全书！转载请标注来源页面的网页链接，并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索

介绍CSS渐变色函数的用法。

建议使用较新的Chrome浏览器阅读此页面。

基础使用

线性渐变

参数：linear-gradient([<方向>,]<颜色节点1>,<颜色节点2>[,…])

方向

改变渐变的方向。

<方向>参数中的允许值如下：

  • to left：从右向左
  • to right：从左向右
  • to top：从下到上
  • to bottom：从上到下（不使用时的默认效果）
  • to top left：从右下到左上
  • to top right：从左下到右上
  • to bottom left：从右上到左下
  • to bottom right：从左上到右下
  • 角度：以从下到上为初始方向，使渐变方向顺时针旋转指定角度
    • 一般使用deg或rad为单位
    • 可以使用小于0deg或大于360deg的角度
示例

linear-gradient(#FF7777,#77FF77,#7777FF)

linear-gradient(to top,#FF7777,#77FF77,#7777FF)

linear-gradient(to top right,#FF7777,#77FF77,#7777FF)

linear-gradient(0deg,#FF7777,#77FF77,#7777FF)

linear-gradient(45deg,#FF7777,#77FF77,#7777FF)

linear-gradient(1rad,#FF7777,#77FF77,#7777FF)

颜色节点

https://www.mywiki.cn/images/2895/a/a6/How_linear_gradient_works_2.png
‌外部图片
查看原始图片
<位置>参数指定了颜色的中心位置。

改变渐变中颜色的种类与分布。

一般每一个<颜色节点>的参数如下：

<颜色>[ <位置>]

其中：

  • <颜色>：一般使用预定义颜色名称、十六进制颜色或RGBA颜色代码（rgba()）表示颜色[1]
  • <位置>：指定颜色节点中心位置
    • 一般使用以%或px为单位的长度[2]
      • %的参考长度为背景块对角线在渐变方向上的投影
    • 可以使用小于0%或大于100%的长度
    • 如不指定则未指定的颜色节点等距分布
示例

linear-gradient(to right,#FF7777,#77FF77 30%,#7777FF)

linear-gradient(to right,#FF7777 50%,#77FF77 75%,#7777FF)

linear-gradient(to right,#FF7777 33.3%,#77FF77 33.3%,#77FF77 66.7%,#7777FF 66.7%)

linear-gradient(to right,#FF7777,#FFFF77 15%,#77FF77 20%,#77FFFF,#7777FF)

linear-gradient(to right,#FF7777 25px,#77FF77 75px,#7777FF 100px)

linear-gradient(to right,#FF7777 25%,#77FF77 100px,#7777FF 100%)


<位置>参数亦可在两个颜色节点之间的一个颜色节点单独使用，用于改变两个颜色节点中间颜色的位置。

示例

linear-gradient(to right,#FF7777,20%,#7777FF)

linear-gradient(to right,#FF7777,80%,#7777FF)

径向渐变

参数：radial-gradient([[形状] [尺寸] [at <位置>],]<颜色节点1>,<颜色节点2>[,…])

形状与尺寸

[形状]参数的允许值如下：

  • circle：圆形
  • ellipse：椭圆形

[尺寸]参数的允许值如下：

  • closest-side：从圆心到最近的边
  • closest-corner：从圆心到最近的角
  • farthest-side：从圆心到最远的边
  • farthest-corner：从圆心到最远的角（不使用时的默认效果）
  • 一个或一对长度值，用逗号分隔
    • 如果只写一个，则形状为圆形，此时不可使用以%为单位的长度
    • 如果写一对，则形状为椭圆形
      • 此时，%的参考长度分别为背景块的宽度和高度

形状和尺寸可以只使用一个。

示例

radial-gradient(at 75px 25px,#FF7777,#77FF77,#7777FF)

radial-gradient(circle at 75px 25px,#FF7777,#77FF77,#7777FF)

radial-gradient(ellipse at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(circle closest-side at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(circle closest-corner at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(ellipse closest-side at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(circle 100px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(75px 100px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(closest-corner at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(75px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(75px 50% at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(50% 50% at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

位置

决定圆心的位置，分为横纵坐标。

横坐标可选值：

  • left：左边
  • center：中间（不使用时的默认效果）
  • right：右边
  • 长度
    • %的参考长度为背景块的宽度
    • 可以使用小于0%或大于100%的长度

纵坐标可选值：

  • top：顶部
  • center：中间（不使用时的默认效果）
  • bottom：底部
  • 长度
    • %的参考长度为背景块的高度
    • 可以使用小于0%或大于100%的长度
示例

radial-gradient(25px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at left bottom,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at center 10px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at 70% 25px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at -5px 60px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at -5% 105%,#FF7777,#77FF77,#7777FF)

颜色节点

方向为从内向外，其余与线性渐变的<颜色节点>相同，不再赘述。

锥形渐变

参数：conic-gradient([at <位置>,]<颜色节点1>,<颜色节点2>[,…])

位置

决定中心位置，参数同径向渐变的位置。

示例

conic-gradient(#FF7777,#77FF77,#7777FF)

conic-gradient(at 10px 10px,#FF7777,#77FF77,#7777FF)

conic-gradient(at left top,#FF7777,#77FF77,#7777FF)

颜色节点

改变渐变中颜色的分布。

每一个<颜色节点>的参数如下：

<颜色>[ <位置>]

其中：

  • <颜色>：一般使用预定义颜色名称、十六进制颜色或RGBA颜色代码（rgba()）表示颜色[1]
  • <位置>：指定颜色中心位置
    • 使用以%、deg或rad为单位的角度
      • %的参考角度为360deg
    • 如不指定则颜色等距分布
    • 亦存在指定两颜色节点中间颜色位置的用法。
示例

conic-gradient(#FF7777,#77FF77,#7777FF)

conic-gradient(#FF7777 10deg,#77FF77 20deg,#7777FF 2rad)

conic-gradient(#FF7777 10%,#77FF77 45deg,#7777FF 70%)

conic-gradient(#FF7777,90deg,#7777FF)

重复渐变

  • repeating-linear-gradient()：重复线性渐变
  • repeating-radial-gradient()：重复径向渐变
  • repeating-conic-gradient()：重复锥形渐变

能创建重复的渐变，参数与其对应的单渐变分别相同。

使用该方式创建渐变时，下一组渐变的起始位置为上一组渐变最后一个颜色节点的位置，因此最好指定最后一个颜色节点的位置。

示例

repeating-linear-gradient(#FF7777 10%,#77FF77 20%,#7777FF 30%)

repeating-radial-gradient(circle 50px,#FF7777 10%,#77FF77 20%,#7777FF 30%)

repeating-conic-gradient(#FF7777 10deg,#77FF77 20deg,#7777FF 30deg)

技巧

多层渐变

参见：User:JackBlock/CSS background

background属性可以叠加多层，写在最前的置于最顶层，写在最后的置于最底层。

利用transparent或rgba()函数可以创建透明或半透明区域，用于设计复杂的图案。

示例
radial-gradient(25px at 50px 50px,#FF7777,#77FF77,#7777FF,transparent),
linear-gradient(#FF7777,#77FF77,#7777FF)
linear-gradient(to top,transparent 42.5%,#D0142C 42.5%,#D0142C 57.5%,transparent 57.5%),
linear-gradient(to left,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%),
linear-gradient(to top,transparent 37.5%,#FFFFFF 37.5%,#FFFFFF 62.5%,transparent 62.5%),
linear-gradient(to left,transparent 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,transparent 57.5%),
linear-gradient(to top right,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%),
linear-gradient(to top left,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%),
linear-gradient(to top left,transparent 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,transparent 57.5%),
linear-gradient(to top right,#00237D 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,#00237D 57.5%)
分层 








linear-gradient(to bottom,#000000 15%,transparent 15%,transparent 81%,#000000 81%),
linear-gradient(70deg,#000000 35%,transparent 35%),
linear-gradient(110deg,transparent 65%,#000000 65%),
linear-gradient(70deg,#FFFFFF 42%,transparent 42%),
linear-gradient(110deg,transparent 58%,#FFFFFF 58%),
linear-gradient(to bottom,#000000 25%,transparent 25%),
linear-gradient(85.5deg,#000000 48%,transparent 48%),
linear-gradient(94.5deg,transparent 52%,#000000 52%),
#FEC600
—— Ｖ Ｃ 编 辑 团 队 ——
　
分层









抗锯齿

上述例子中可以看到斜向的颜色分界有明显锯齿纹路。

如：

linear-gradient(to top right,#00237D 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,#00237D 57.5%)

我们可以在分界之间留下1px的空间达到抗锯齿的效果。（可利用calc()函数）

例如，将上述例子修改为：

linear-gradient(to top right,#00237D 42.5%,#FFFFFF calc(42.5% + 1px),#FFFFFF calc(57.5% - 1px),#00237D 57.5%)

注意：使用calc()函数，运算符号和数字间需要输入空格。

  • calc(42.5%+1px)（错误）
  • calc(42.5% + 1px)（正确）

注释

  1. ↑ 1.0 1.1 其他表示方式包括RGB颜色、HSL颜色代码、HSLA颜色代码，参见 https://www.runoob.com/cssref/css-colors-legal.html 。
  2. ↑ 全部可用的单位包括em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax，参见 https://www.runoob.com/cssref/css-units.html ，但是真的有人会用这些奇奇怪怪的单位吗。
取自“https://moegirl.icu/index.php?title=User:JackBlock/渐变色使用&oldid=7286708”