2

私は、PSDのスライスとtuts +によるHTMLへの変換のチュートリアルに従っており、かなりのことを学んでいますが、本当に厄介なことに悩まされています。.inner-shadowを使用してメインCTAにinner-shadowを追加しようとすると、希望する色や場所に遠くない灰色のバーが表示されます。これは、レッスンで利用可能なソースコードファイルからコードをそのままコピーした場合でも発生します。

関連するすべての情報は次のとおりです（キーが不足している場合はお知らせください）：使用：Sublime Text 2、Winless for LESSコンパイル、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)

エリックマイヤーのリセットを使用します。

私が期待しているのはこれです（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 に答える