概要
普通に素直に書いているハズの box-shadow がウンともスンとも効かない。
何故か効いてる箇所もある。
詳細
例えばこんな HTML があるとする
index.html
<!DOCTYPE html>
<html>
<head><title>Sample</title></head>
<body>
<div id="container">
<div class="hoge">
<p>さんぷる</p>
</div>
</div>
</body>
</html>
んで、こんな CSS があるとする
bad.css
.hoge {
width: 400px;
height: 200px;
background-color: #ff0000;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
まぁ、効かないんですわ。そりゃもう盛大に。
※ひょっとしたら、上の例だと効くかも？ (検証してないｗ
解決策
色々あるのかも知れないけど、何故か border-radius 付けたら描画された。
good.css
.hoge {
width: 400px;
height: 200px;
background-color: #ff0000;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
border-radius: 1px;
}
レイアウトが微妙に変化するので、どうにかならんかと思って、プロパティの値として 0 やら -1px やら付けてみたけどダメだった。