CSS3 で二重丸を作る

仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ

今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。

margin: auto;
background-color: #00b1f4;
border: solid 6px #fff;
width: 70px;
height: 70px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
box-shadow: 0 0 0 3px #00b1f4;
-webkit-box-shadow: 0 0 0 3px #00b1f4;
-moz-box-shadow: 0 0 0 3px #00b1f4;

真ん中に文字を入れることも可能です、JavaScript で制御すれば文字数に応じて円の大きさを可変で作ることも出来そうですね。

  <!-- TechRacho ボールのコードです -->
  <div style="margin: auto;
              background-color: #1d0204;
              border: solid 6px #f4a814;
              width: 70px;
              height: 70px;
              -moz-border-radius: 60px;
              -webkit-border-radius: 60px;
              border-radius: 60px;
              box-shadow: 0 0 0 3px #1d0204;
              -webkit-box-shadow: 0 0 0 3px #1d0204;
              -moz-box-shadow: 0 0 0 3px #1d0204;">
    <p style="font-size: 12px;
              margin-top: 25px;
              color: #f4a814;
              text-align: center;
              font-weight: bold;">
      TechRacho
    </p>
  </div>

円だけではなく楕円も可能です。

グラデーションも可能です、実はborder もグラデーション可能だったみたいです。あまりやり過ぎると最早CSS で描画していることがパッと見わからなくなりますね。

なお、IE9 では上記のグラデーションを使用すると円ではなく四角になってしまうみたいです。加えてIE7,8 においては全て四角で表示されてしまいます。大きさはwidth とheight で指定したものなので、レイアウトの崩れには繋がりません。