CSSで円を作成します。

円

border-radius プロパティを使用し円を作成してみます。

HTML

<div class="circle">circle</div>

CSS

.circle {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: solid #000000;
  border-radius: 50%;
  text-align: center;
}

結果

circle

浮き円

円を浮かせてみます。box-shadowプロパティを使用すると浮いているように見えます。

HTML

<div class="circle">circle</div>

CSS

.circle {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: solid #000000;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 0 8px gray;
}

結果

circle