1

我从 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 文档，但找不到答案。任何人？

谢谢！

4

1 回答 1

4

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

@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

于 2011-03-15T03:25:35.920 回答