IE8 でも box-shadow を使う
最近、案件での IE 最低ラインが 8 になってきました。とても喜ばしいことですが、8 が良いわけではなく、7 や 6 といった不良仲間で確認しなくても良くなった、というだけです。
さて、デザイン内に影がついていることはフラットデザインが流行っている今でも普通にあることで、でもどうせならその影は box-shadow で表現したいという欲求が常にあります。IE なぞ切り捨ててしまえば、Sass で一発なんですが、そうもいきません。
@include box-shadow(0 0 3px rgb(100, 100, 100));
IE8 という、-ms- を付けてもダメな不良品には、box-shadow が使えません。でも画像を影付きで切り出すのは、対象となるボックス内の伸張を考えるとどうしても階層が深くなってしまうので、あまりやりたくありません。そこで、filter を使ってあげましょう。
box-shadow: 0 0 5px #555;
-moz-box-shadow: 0 0 5px #555;
-o-box-shadow: 0 0 5px #555;
-ms-box-shadow: 0 0 5px #555;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=0, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=90, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=180, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=270, strength=3, enabled=true);
Chrome での影(box-shadow)
IE8 での影(filter)
box-shadow とは異なり、4 方向に値を与えないといけない点や、filter で指定する色やぼかし範囲が違ったり、box の外側に付くわけではなく filter による影が幅や高さにプラスされるのでそれぞれ negative margin を別途与えてやる必要はありますが、これで階層を少し浅くできますね。
Author And Source
この問題について(IE8 でも box-shadow を使う), 我々は、より多くの情報をここで見つけました https://qiita.com/wings1685/items/0cdee110a3d394409780著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .