MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

枠のシャドウや角丸が抜けている

概要

 枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。

要因

 要因の代表例として以下があります。

  1. ベンダープレフィックス
    webkitブラウザ向けの記述がされている場合、この現象が発生します。
    例えば、以下のような場合です。

    • シャドウの場合

        .hoge {
      	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }			
    • 角丸の場合

        .hoge {
      	-moz-border-radius: 6px;
      	-webkit-border-radius: 6px;
        }			

解決策

 要因の解決策の代表例として以下があります。

  1. ベンダープレフィックス
    他ブラウザで互換性を維持する為に、以下のようなbox-shadowプロパティ、border-radiusプロパティの記述を追加します。

    • シャドウの場合

        .hoge {
      	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
      	box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }			
    • 角丸の場合

        .hoge {
      	-moz-border-radius: 6px;
      	-webkit-border-radius: 6px;
      	border-radius: 6px;
        }			

メリット

 ・他のブラウザでも互換性を維持することができます。
 ・追記のみの対応のため改修が容易です。

戻る

ドキュメントのタグと貢献者

 このページの貢献者: wtrfp
 最終更新者: wtrfp,