2

我正在学习 tuts+ 的 PSD 切片和转换为 HTML 的教程，我学到了很多东西，但是我遇到了一些非常烦人的事情。当我尝试使用 .inner-shadow 将内部阴影添加到主 CTA 时，我得到一个灰色条，它与我想要的颜色或位置不相近。即使我完全按照课程中可用的源代码文件复制代码，也会发生这种情况。

以下是所有相关信息（我希望，如果缺少任何密钥，请告诉我）：使用：Sublime Text 2、用于 LESS 编译的 Winless、Chrome（版本 24.0.1312.57 m）和 Firefox（v. 18.0.2）来显示地点。相关的LESS混合：

.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 实际上会将阴影放在盒子的顶部！

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

谢谢！

-编辑-这是它的CSS：

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

1 回答 1

2

试试这个

.inner-shadow (@inset: inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
于 2013-02-18T04:25:12.497 回答