【CSS3】border-radiusを利用して画像を丸く表示してみる

css

ここ最近はブラウザのバージョンも上がってきたし、IEのシェアも減ってきたので嬉しい限りです！！
そのおかげかCSS３の新しいプロパティも利用できるようになってきたので、今回はCSS3を利用して画像を丸く切り抜いたように加工する方法を紹介していこうと思います。

思いのほか・・というかほんとにすぐにできた。　笑

htmlファイルの準備

今回は、画像を直接丸く切り取る方法ｔと背景画像を丸くする設定の二つ。　背景画像の場合はdivタグにfigureクラスの設定をしています。


/* 画像 */


/* 背景画像  */


    
これは、背景画像だよ。

まぁここに関しては特に、コメントはありません・・というかしようがない。笑

border-radiusプロパティを利用する

さて、ここでCSS3で追加された角丸を作るためのプロパティである「border-radius」を使用して下記のような設定にしました。


img{
    width:200px;
   border-radius:100px;    
}


#figure{
    width:200px;
    height:200px;
    background-image:url("http://jsrun.it/assets/h/O/I/5/hOI5B.jpg");
    border-radius:100px;

   /* ここから下はテキストを中央に表示させる設定です  */
    display:table-cell;
    vertical-align:middle;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
}

設定はどちらも同じで、対象が画像であるか、もしくは背景画像を設定する要素かの違いだけなので、簡単に説明します。

画像の場合は特に幅を設定しなくてもいいですが、今回は200pxとしています。figureクラスの設定も縦横200pxの円を描きたいので幅と高さを設定しています。

そして、border-radiusを利用するのですが、角丸のコーナーの範囲は画像の幅の半分を指定します。上記の場合だと200pxの画像なので半分の100pxを指定する事で水平方向と垂直方向に角丸ができるので真丸ができます。

ただし、200pxの幅に対して、border-radiusを半径以上の数値・・・200pxとか300pxなど指定しても結果は変わりません。