【CSS】box-shadowを設定したのに、影の一部が出ない対応【476日目】

影をつけるCSSを書きましょう

div {
    box-shadow: 10px 10px;
}

よし、影が表示されるはずだ！

右の影が表示されない

なぜだ！設定は完璧のはずだ！

div {
    width: 100%
    box-shadow: 10px 10px;
}

ほら！！

影はあるけど、隠れている

影は作りましたが、横幅が100%なので、影分のスペースが足りません。

なので、影を表示させるだけのスペースを用意してあげましょう。

margin

div {
    margin: 10px;
    width: 100%
    box-shadow: 10px 10px;
}

これで影を使うだけのスペースが確保できました！

もしこれでも上手くいかない方は、box-sizingも加えてみてください。

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    margin: 10px;
    width: 100%
    box-shadow: 10px 10px;