IE9~11でbox-shadowのinsetとborder-radiusを組み合わせると角丸が太くなる
box-shadowプロパティのinsetとborder-radiusプロパティを組み合わせるとIE9~IE11で角丸が太くなる現象が発生します。
CSS
.sample { box-shadow : inset 0 0 0 5px #d00 ; border-radius : 10px ; } |
サンプルコードでは5つ目のスプレッドのみで太くしていますが、4つ目のぼかしの指定があっても同様の現象が発生します。
この現象を回避するには、ぼかしがある場合とない場合で回避方法が異なります。
ぼかしがない場合は次のようにborderプロパティに置き換えることで同様の表現ができます。
CSS
.sample { border : 5px solid #d00 ; border-radius : 10px ; } |
ぼかしがある場合は次のように疑似要素を作り、それに対して外側の方向にbox-shadowでぼかしを効かせることで表現ができます。
また、ぼかしがあるパターンではノイズが出る場合があるのでbox-shadowのinsetを追加したり、内側の角丸の値を小さくして調整したりするなどその他にも細かい調整を行っています。
CSS
.sample { position : relative ; z-index : 1 ; border-radius : 10px ; background-color : #d00 ; } .sample::before { position : absolute ; top : 10px ; left : 10px ; z-index : -1 ; box-shadow : 0 0 5px 5px #eee , inset 0 0 0 5px #eee ; border-radius : 2px ; width : calc ( 100% - 20px ); height : calc ( 100% - 20px ); content : "" ; background-color : #eee ; } |