画像を完全な円にする方法 – 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/”/]