少。阴影问题

时间:2013-02-18 03:47:09

标签: css less mixins

我正在通过tuts +关注PSD切片和转换为HTML的教程,我正在学习相当多的东西,但是我仍然坚持一些非常讨厌的东西。当我尝试使用.inner-shadow将主阴影添加到主CTA时,我会得到一个灰色条,它不会远离我想要的颜色或位置。即使我从教程中提供的源代码文件中完全复制代码,也会发生这种情况。

这是所有相关信息(我希望,如果有任何关键缺失,请告诉我): 使用:Sublime Text 2,Winless for LESS compiling,Chrome(版本24.0.1312.57 m)和Firefox(v.18.0.2)来显示网站。 相关的LESS mixin:

.inner-shadow (inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
-webkit-box-shadow: @arguments;
box-shadow: @arguments;

CTA下的代码:

.inner-shadow(inset, 0, -8px, 0, rgba(0, 0, 0, 0.2)); (rgba used to make the black less harsh and more transparent)

使用Eric Meyer的重置。

我期望的是(来自PSD文件):

我得到的是:

请注意,要将阴影移到正确的位置,我实际上必须在.inner-shadow中为Y轴输入8px而不是-8px。不知道为什么轴被翻转,但是把-8px实际上把阴影放在盒子的顶部!

对此感到非常困惑,非常感谢任何帮助。

谢谢!

-Edit-这是它的CSS:

    -webkit-box-shadow: 0 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 8px 0 rgba(0,0,0,0.2)

1 个答案:

答案 0 :(得分:2)

试试这个

.inner-shadow (@inset: inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
相关问题