时间戳

首页 > 解决方案 > 将线性渐变语法转换为-webkit-渐变语法

html - 将线性渐变语法转换为-webkit-渐变语法

问题描述

我正在尝试在该段落中添加行，但我无法将以下语法的线性渐变转换为 -webkit-gradient 语法，因为 wicked_pdf 不支持 rails 的线性渐变。

任何帮助，我无法在网上找到 -webkit-gradient 文档。

linear-gradient(180deg, rgba(230, 230, 231, 1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);

标签： htmlcsslinear-gradients

解决方案

你这样做：

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

<type>是线性的或径向的。

<point>是一对以空格分隔的值。该语法支持点值的数字、百分比或关键字 top、bottom、left 和 right。

[, <radius>]?是一个数字，仅在<type>径向时使用。

<stop>是一个函数, color-stop, to, 或from. color-stop接受 2 个参数：停止值（百分比或 0 到 1.0 之间的数字）和颜色（任何有效的 CSS 颜色）。to(color)是 的等价物color-stop(0, color)并且from(color)是 的等价物color-stop(1.0, color)。

例子：-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00))

你也可以使用-webkit-linear-gradient(angle, startColor, endColor)

例子：-webkit-linear-gradient(135deg, white, black)

您的具体示例将是这样的：

-webkit-linear-gradient(180deg, rgba(230, 230, 231, 1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);

来源：
https ://webkit.org/blog/175/introducing-css-gradients/
https://webkit.org/blog/1424/css3-gradients/

推荐阅读