日刊ハイテク情報誌の マガジンOFFです! 毎日IT系のニュースを 配信しています!

画像を完全な円にする方法 – html css

html

<img src="./img/test.jpg" class="circle" alt="Cinque Terre">

css

.circle {
  width: 200px;
  height: 200px;
   /* 幅と高さの半分 */
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  background: #C00;
}

参考

[urlpreviewbox url=”https://iwb.jp/css-precise-circle-px-percent/”/]

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

ホーム