指南针 CSS3 边框颜色
我从 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
首先,通过将以下行添加到您的 scss 文件中,确保您已包含线性渐变混合:
然后您可以将线性渐变混合用于样式中的任何属性,如下所示:
例如:
将产生边框从上到下,从 c2... 开始,经过 d3...,
最后以 eb... 结束。您还可以通过将值 Bottom 传递给start 参数:
或者从左到右(反之亦然)
您也可以传递图像 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:
Then you can use the linear-gradient mixin for any property within a style, like so:
For example:
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:
Or left to right (or vice versa)
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