CSS3で角丸を付ける
2012/2/10更新
- TOP >
- スマホ対応HP作り方 >
- CSS3で角丸を付ける方法
CSS3で角丸を付ける
CSS3ではグラデーションを付ける事ができます。
「CSSでボタン作成」で説明した箇所については説明を省いています。
HTML側の記述
<a class="btn" href=""/>ＢＵＴＴＯＮ1</a>
CSS側の記述
.btn {
width: 80%;
margin: 0 auto;
padding: 10px 15px;
display: block;
font-size: 15px;
text-align: center;
text-shadow: 1px 2px 3px #CCCCCC;
background: #E4E4E4;
background : -webkit-gradient(linear,left top, left bottom, from(#F3F3F3), to(#BEBEBE));
background : -moz-linear-gradient(top, #F3F3F3, #BEBEBE);
color: #000000;
border: 1px solid #CCCCCC;
-webkit-border-radius: 5px 10px 5px 10px;
-moz-border-radius: 5px 10px 5px 10px;
}
-webkit-border-radius
「-webkit-border-radius」はに角丸を付ける指定の記述です。
全ての角を同じ角丸に指定する場合は「-webkit-border-radius: 5px;」と指定するだけで4辺が同じ角丸になります。
-moz-border-radius
「-moz-border-radius」はグラデーションを付ける指定の記述です。
全ての角を同じ角丸に指定する場合は「-moz-border-radius: 5px;」と指定するだけで4辺が同じ角丸になります。
アドバイス
-webkit-border-radiusと-moz-border-radiustは必ず両方を指定して下さい。
現状ではChromeやSafariなどのwebkit系と、FirefoxなどのMozilla系のブラウザで別々に指定する必要があります。
さらに円を楕円にしたい場合は「/」で区切り水平サイズを指定して下さい。「-webkit-border-radius: 5px 20px 5px 20px / 10px 30px 10px 30px;」