css gradient 渐层设计冥想

• 说明： css level 3 (css 3) gradient 历经数年数次的规则编修，终于有了底定的态势，多家浏览器也在本文发表的当年有了更完整的支援，让我们不需再完全只能依赖像素化图形制作渐层。特别仅运用 CSS gradient 技术，设计出令人意想不到的图案 (patterns) ，期望能激发更多的设计想像空间。
• 适合：想模仿范例自行制作者，须熟悉 html 及 css 语法，并有使用绘图软体渐层经验。
• 难度：
• 更新：2013-12-19
• 支援：详细可参考 Can I Use (至更新时，部分仍为厂商专属扩充特性，须加上辨识词)。

Linear Gradients 直线形渐层 ₪

标准语法

linear-gradient(direction, color-stop, ……, color-stop)
repeating-linear-gradient(direction, color-stop, ……, color-stop)

说明

• 以函数 (function) 形式表示，当作如 background-image, list-style-image 之类的值。
• direction 参数，表示渐层颜色变化的方向。以 deg (角度) 为单位，惟 0deg 是由下往上的垂直方向 (渐层为水平呈现) ，正的角度依顺时钟旋转。内定值 (没有指定时) 为 180deg ，也就是由上往下的垂直方向。
• direction 参数也可由 top, bottom, left, right 等特别字 (keywords) 表示，如 to top, to right, to bottom, to left ，分别表示 0deg, 90deg, 180deg, -90deg 。而如 to bottom right 则表示渐层分布由 gradient box 左上角往右下角 (斜对角) 的方向。当作 background-image 时， gradient box 通常就是 background-size 的范围。
• color-stop 参数，表示渐层的颜色及分布，可分为二部分，颜色及色布，中间至少需以一半形空格分隔，当然可以有很多组 color-stop 。颜色表示方式可参考 color units ；色布 (颜色分布位置) 可以 css 各种标准尺寸单位表示 (如 %, px, em, …) ，可以接受小于 0% 及大于 100% ，有时候 0% 或 100% 的位置可省略，如果都没有指定色布，浏览器应由 0% 至 100% 自动平均分配位置。而如需精准计算尺寸，可参考 w3c 图示 。
• repeating-linear-gradient() 与 linear-gradient() ，差别在前者会无限重复呈现，仿如 ……, color-stop, color-stop,…… 。

语法实例

background-image:linear-gradient(30deg,hsl(30,100%,80%), hsl(120,80%,50%));
background-image:linear-gradient(to bottom left, hsl(240,100%,50%), hsl(60,100%,75%) 35%, hsl(240,100%,50%));
list-style-image:repeating-linear-gradient(45deg, hsl(260,100%,50%), hsl(260,100%,50%) 5%, transparent 5%, transparent 10%);

Radial Gradients 放射形渐层 ₪

标准语法

radial-gradient(size at cp, color-stop, ……, color-stop)
repeating-radial-gradient(size at cp, color-stop, ……, color-stop)

说明

• 以函数 (function) 形式表示，当作如 background-image, list-style-image 之类的值。
• size at cp 参数，表示放射形渐层椭圆形的半径尺寸 (size) 及圆心位置 (cp) 。圆心为渐层的始点，指定方式与 background-position 相同，内定值 (没有指定时) 为 center ，表示 gradient box 中心点。当作 background-image 时， gradient box 通常就是 background-size 的范围。半径 (size) 可以是 css 各种标准尺寸单位表示 (如 %, px, em, …) ，二个值以半形空格分隔表示椭圆形水平与垂直半径，如果仅一个值表示正圆形，但一个值不接受 % 为单位；而 % 是以 gradient box 的范围来计算。渐层椭圆形的尺寸是独立的，不一定要符合 gradient box 。

• size 也可依 gradient box 为基准，由几个特别字 (keywords) 表示：

  1. farthest-side

     以离圆心最远的一边，水平与垂直的距离为半径。

  2. farthest-corner

     以离圆心最远的一角为渐层椭圆形的边缘 (100% color-stop) ，水平与垂直半径比例依据 farthest-side 时的比例。此为内定值 (没有指定时) 。

  3. closest-side

     以离圆心最近的一边，水平与垂直的距离为半径。

  4. closest-corner

     以离圆心最近的一角为渐层椭圆形的边缘 (100% color-stop) ，水平与垂直半径比例依据 closest-side 时的比例。

• color-stop 参数，表示渐层的颜色及分布，可分为二部分，颜色及色布，中间至少需以一半形空格分隔，当然可以有很多组 color-stop 。颜色表示方式可参考 color units ；色布 (颜色分布位置) 可以 css 各种标准尺寸单位表示 (如 %, px, em, …) ，可以接受小于 0% 及大于 100% ，有时候 0% 或 100% 的位置可省略，如果都没有指定色布，浏览器应由 0% 至 100% 自动平均分配位置。 0% 表示渐层椭圆形圆心； 100% 表示渐层椭圆形边缘。
• repeating-radial-gradient() 与 radial-gradient() ，差别在前者会无限重复呈现，仿如 ……, color-stop, color-stop,…… 。

语法实例

background-image:radial-gradient(100px, hsl(50,100%,70%), hsl(240,100%,30%));
background-image:radial-gradient(60px 120px at 60px 120px, hsl(0,100%,95%), hsl(0,100%,90%) 30%, hsl(0,100%,95%) 40%, hsl(0,100%,95%) 42%, hsl(0,75%,86%) 99%, transparent) ;
background-image:repeating-radial-gradient(farthest-side at top, hsl(240,100%,96%), hsl(240,100%,96%) 6px, transparent 6px, transparent 16px);
list-style-image:repeating-radial-gradient(hsl(120,100%,50%), hsl(120,100%,50%) 2px, transparent 2px, transparent 3px);

参考→基本范例教学

参考资源

• css Image Values : gradients - w3c 官方文件 (英文) 。