問題
画像をCSSで角丸に表示したい
解決策
spanタグ等で囲い、その要素に「border-radius」と「overflow: hidden;」を設定する。
画像を差し替えても角丸が自動的に設定出来るように
デザイン上、画像を角丸で表示させる必要のある場面はよく出てくると思います。そんな時、角丸に設定した画像を書き出して…と行うと、画像を差し替える際、再び角丸に設定しなければなりません。今回は画像をCSSで角丸に表示する方法をご紹介します。
まず、マークアップから行います。
例として、画像をspanタグで囲います。
便宜上、ここではspanタグに「radius」というクラスを設定しています。
<p>
<span class="radius">
<img src="" alt="">
</span>
</p>CSSの構築
spanタグのクラス「radius」に対し、「display:inline-block;」と「line-height: 0;」と「border-radius」と「overflow: hidden;」を設定します。
.radius{
display: inline-block;
line-height: 0;
border-radius: 10px;
overflow: hidden;
}
DEMOはこちら
コメント