角丸のボックスを作成
これまで、画像を用意しなければ作れなかった角丸ボックスも、CSS3では簡単なコードで実装可能です。
「border-radius」を使う
以下のようにブロック要素にborder-radiusを指定することで角丸化することが可能です。
index.html
<div class="radius-box"> </div>
style.css
.radius-box{
border-radius:10px;
width:100px;
height:100px;
background:rgb(20%,20%,20%);
}
見本ページを新しいタブで開く
「border-radius」を使って円を作る
以下のようにborder-radiusに大きな値を指定することで円を作成することが可能です。
index.html
<div class="circle"> </div>
style.css
.circle{
border-radius:100px;
width:100px;
height:100px;
background:rgb(20%,20%,20%);
}
見本ページを新しいタブで開く