指南针 CSS3 边框颜色

发布于 2024-10-21 06:22:04 字数 457 浏览 1 评论 0原文

我从 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 文档但找不到答案一样。有人吗?

谢谢!

I'm starting with SASS/Compass and i'm in trouble right now.

I want to translate this CSS code

-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

Into some SASS/Compass beautiful code. I think that it should be something like

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

I've searched the Compass documentation but couldn't find the answer. Anyone?

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

背叛残局 2024-10-28 06:22:04

首先,通过将以下行添加到您的 scss 文件中,确保您已包含线性渐变混合:

@import "compass/css3/gradient"

然后您可以将线性渐变混合用于样式中的任何属性,如下所示:

@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

First, make sure that you have included the linear-gradient mixin, by adding the following line to your scss file:

@import "compass/css3/gradient"

Then you can use the linear-gradient mixin for any property within a style, like so:

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

For example:

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

Would yield a border going from the top to the bottom, starting with c2..., passing through, d3..., and ending with eb....

You can also make the border go from bottom to top, by passing the value bottom to the start parameter:

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

Or left to right (or vice versa)

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

You can pass an image url to superimpose the border over a background image, too.

See this page for a working example with sample code:

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文