指南针 CSS3 边框颜色答案

【问题标题】：Compass CSS3 Border Colors指南针 CSS3 边框颜色
【发布时间】：2011-07-12 19:12:00
【问题描述】：

我从 SASS/Compass 开始，现在遇到了麻烦。

我想翻译这段 CSS 代码

-moz-border-top-colors: #c2c2c2 #d3d3d3 #ebebeb 
-moz-border-right-colors: #c2c2c2 #d3d3d3 #ebebeb
-moz-border-bottom-colors: #c2c2c2 #d3d3d3 #ebebeb
-moz-border-left-colors: #c2c2c2 #d3d3d3 #ebebeb

进入一些 SASS/Compass 漂亮的代码。我觉得应该是这样的

border: 3px solid @inclue linear-gradient(#c2c2c2, #ebebeb)

我搜索了 Compass 文档，但找不到答案。有人吗？

谢谢！

【问题讨论】：

您觉得 SAAS 怎么样？我认为这是自 CSS 以来 CSS 发生的最伟大的事情。

标签： ruby-on-rails haml sass compass-sass

【解决方案1】：

首先，通过在 scss 文件中添加以下行，确保您已包含线性渐变混合：

@import "compass/css3/gradient"

然后，您可以对样式中的任何属性使用线性渐变 mixin，如下所示：

@include: linear-gradient($color-stops, [$start], [$image]);

例如：

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb));

会产生一个从上到下的边框，从 c2... 开始，经过 d3...，并以 eb.... 结束。

您还可以通过将值 bottom 传递给 start 参数来使边框从下到上：

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb), bottom);

或从左到右（反之亦然）

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb), left)

您也可以传递一个图像 url 以将边框叠加在背景图像上。

有关示例代码的工作示例，请参见此页面：

http://compass-style.org/docs/examples/compass/css3/gradient/#scss

【讨论】：

该死的好答案！我不知道覆盖渐变的图像。现在就试试这个！谢谢！
线性渐变是否适用于边框？（根据 Mateus 问题）
不这么认为......至少在 Chrome 中不是。这是一个专有的 webkit 方法：stackoverflow.com/questions/2717127/css3-gradient-borders
我想指出“css/gradient”模块已被贬值。 “css3/images/”模块是用户需要的。