このソースコードのbox-shadowが効かない理由を教えてください。

なぜかbox-shadowがきかないです....
対象ブラウザはクロムです。
正しい記述をご教示ください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>boxshadow</title>
    <style>
    
    .btn {
    width: 70%;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 20px 18px;
    font-size: 18px;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 9px;
    box-shadow: 0px 10px rgb(17, 14, 9);
    -webkit-box-shadow: 0px 10px rgb(17, 14, 9);
    }
        
    .btnOrange {
    color: #ffffff;
    background: #fbb700;
    }

    </style>
</head>
<body>
  <div class="btnBox btnMargin">
  <a href="" class="btn btnOrange">ぼたん</a>
  </div>
</body>
</html>

masaya_ohashi

2016/06/30 04:09

私の環境下では真っ黒に近いシャドウができていますが、何を以って「きかない」とおっしゃっていますか？

K_9301

2016/06/30 04:59

言葉足らずで失礼しました。一切影が出てこない状態となっております。

kei344

2016/06/30 06:48

解決されたようでよかったです。まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答3件

ベストアンサー

box-shadow: 0px 10px rgb(17, 14, 9);

ボケ足の幅の指定が入っていません。

CSS
1box-shadow: 0px 10px 10px rgb(17, 14, 9);

のように、3つ目の数値が必要です。

box-shadow: X方向の位置 Y方向の位置影のボケ足のサイズ影の色;

↑こちらが最低限必要な指定になりますので。

投稿2016/06/30 04:08

aKusano

総合スコア3763

aKusano

2016/06/30 04:17

おっと、masaya_ohasiさんのご指摘の通り、影自体は出来てますね。が、ボケ足がついてないので「影」だと認識できてないだけなんじゃないでしょうか？現状だと X方向移動0、Y方向移動10px、ボケ足0（省略）なので、黄色いボタンの真下に黒いベタ塗り状態の影が伸びてる形です。

K_9301

2016/06/30 05:10

コメント有り難うございます。一切影が出ていない状態となります。ボケ足も追加したのですが.... デベロッパーツールでみると、下記のように△のアラートマークがでて記述に対して訂正腺が惹かれてます。ためしに△にマウスオーバーすると、「Invaild Property Value」とメッセージが出てきます。。 △ box-shadow: 0px　10px rgb(17, 14, 9); △ -webkit-box-shadow: 0px　10px 10px rgb(17, 14, 9); 何か思い当たる点はありますでしょうか。 PC自体も変えて見たのですが同じ状態です。

masaya_ohashi

2016/06/30 05:15

全角スペース入ってないですか？

K_9301

2016/06/30 05:40

コメントでの記述間違えました。。正しくは以下です。 .btn { box-shadow: 0px 10px 10px rgb(17, 14, 9); -webkit-box-shadow: 0px 10px 10px rgb(17, 14, 9); }

aKusano

2016/06/30 05:48

Chrome以外のブラウザでは出てますか？

K_9301

2016/06/30 06:19

出ていなかったです。。ただ。rgbaの半角スペースを以下のように抜いたら繁栄されました。 box-shadow: 0px 10px 10px rgb(17,14,9); -webkit-box-shadow: 0px 10px 10px rgb(17,14,9) こういうこともあるのでしょうか。。ひとまずご相談させていただき有り難うございました。

aKusano

2016/06/30 06:31

掲示いだいたコードをそのままコピペしても問題なく表示されていましたので、通常半角スペースなら問題ないはずですが、不可視文字で何か不正なデータが紛れ込んでいた可能性も無きにしもあらず・・・ですかね。とりあえず表示されたようでよかったです。

行動規範の内容に同意します

「影が出ない」というのは｢影らしくない｣ということでしょうか。ボタン周りの黒い部分はbox-shadowですよ。

CSS
1-webkit-box-shadow: 0px 10px 10px -10px rgb(17, 14, 9);
2        box-shadow: 0px 10px 10px -10px rgb(17, 14, 9);

動くサンプル：https://jsfiddle.net/w86ma1ad/

色を透過色にするとか？

CSS
1-webkit-box-shadow: 0px 7px 7px 0 rgba(17, 14, 9, 0.3);
2        box-shadow: 0px 7px 7px 0 rgba(17, 14, 9, 0.3);

動くサンプル：https://jsfiddle.net/w86ma1ad/1/

投稿2016/06/30 05:19

kei344

総合スコア69424

何を持ってきかないと言われているかによって回答がかわりますね。
表示上は指定した通りのbox-shadowが描かれています。

影がぼやけていない場合
オフセットx,y指定の後にボケ幅の指定がないので、ぼけません。
0px 10px ”ボケの指定がない” rgb(17, 14, 9);

box-shadowの数値を変えても何も変わらない場合
Chromeが-webkit-box-shadow での指定を優先しています。

そもそも影が出ていない場合
提示されたソースで影が見えているので他に要因がありそうです。

投稿2016/06/30 04:17

kopio

総合スコア487

K_9301

2016/06/30 05:10

kopio

2016/06/30 05:38

全角の空白が入っていませんか？ 0px　10px　←この間とか

K_9301

2016/06/30 05:52

コメントでの記述間違えました。。正しくは以下です。 .btn { box-shadow: 0px 10px 10px rgb(17, 14, 9); -webkit-box-shadow: 0px 10px 10px rgb(17, 14, 9); }

kopio

2016/06/30 06:06

確認に使われているHTML全体で全角スペースが混じってるところはありませんか？手元のファイルではなく、質問内容にはられているHTML部分をコピペして別ファイルで保存して確認してもだめですか？

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

このソースコードのbox-shadowが効かない理由を教えてください。

関連した質問