Question

我正在尝试在段落中添加行，但是由于wicked_pdf中不支持rails的线性梯度，因此无法将下面的线性梯度语法转换为-webkit-gradient语法。

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

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

Answer 1

您这样做：

-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/

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

1 个答案: