小技をBLOGに集結!

enkei01

CSSで画像を円形に切り抜く方法

CSSで画像を丸く切り抜く方法を備忘録としてご紹介します。

企業サイトのトップページや、ECサイトの商品一覧などで、3~4つほどの横並びコンテンツがあり、そこに丸いサムネイル画像を置いているのをために見かけます。

画像は四角でも全然構わないのですが丸くしてちょっとだけ目を引く形にしてやろうと言うのが、今回の目的です。

なお、画像を作るのが面倒なのではなく、画像を差し替えれば自動的に丸くなってくれるというのを目指し、CSSで円形に切り抜いてみたいと思います。

CSSで画像を円形に切り抜く方法

四角形の元画像

031-300x300

http

maru

丸く切り抜く(デモ1)

上の画像を丸く切り抜き、「border-radius」プロパティを利用します。

031
html

maru

CSS

.maru-box img {
    border-radius: 300px;
}

角丸にする(デモ2)

四隅に、20pxの角丸を設定しました。

031-300x300

html

maru

CSS

.maru-box2 img { border-radius: 20px; }

枠線を付けてみる(デモ3)

円形画像に、グリーンの枠線を付けてみました。

031-300x300

html

maru

CSS

.maru-box3 img { border-radius: 50%; border: 4px solid GREEN; }

2重枠線を付けてみる(デモ4)

円形画像に、2重枠線を付けてみました。

031-300x300

html

maru

CSS

.maru-box4 img { border-radius: 50%; border: 10px double #8b0000; }

 

関連記事

  1. pelican-puzzle
  2. up-down
  3. 7220032bb1abbfa8d3ffbd64edd01182_s
  4. marker1

最近の記事

  1. wordpress-800x480
  2. marker1

    2019.07.6

    文字装飾
  3. kigou1
  4. 7220032bb1abbfa8d3ffbd64edd01182_s
  5. p_s

スマホやタブレットでも大丈夫!

mb300x142

ポップメディア直営サイト

ポップメディア:Web制作支援
 
〒112-0011東京都文京区千石2-33-10-102
 
URL https://popmedia.jp/
 
TEL:03-6912-08214
 
モバイル:080-3409-4566
 
popmedia
contact-bana
PAGE TOP