スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像を使わずにCSSで枠線(border)の角を丸くする方法!

これまで、画像を使って表現していた角丸(かどまる)を、CSS3の記述を用いる事で、画像を使わずに簡単に表示させる事が出来ます。
border-radiusと言うプロパティで、Firefox, Safari, Google Chromeでは独自拡張として実装されています。
*注意  この手法はブラウザが IE8(インターネット・エクスプローラー8)では効果を発揮しません。(2011年01月現在IE8以下。今後IEの新バージョンでは表示が出来る様になるとは思いますが・・・。)

このブログを見て頂くと解ると思いますが、ヘッダーやプラグインタイトル、リンクボタンにこの手法を用いています。(2011年01月現在)
ブログデザイン変更の為、一部、記事下(続き)に表示しています。


画像を使わずにCSSで枠線(border)の角を丸くする方法!


001-00001.jpg 



(例)ヘッダーに2pxの太さで赤い(#FF0000)線を引き、角に(半径)3pxの丸みを付ける場合

まずお好みの色にて、線(border)を引きます。
(注意 - top, right, bottom, left を同じ太さで・・・太さを変えるとChromeではやや表示がおかしくなります。これについては次回・・・。)

/*---------------------------------------------------------

#header {
border: #FF0000 2px solid;
}

-----------------------------------------------------------*/

と書き、同じ { } の中に

/*----------------------------------------------------------


border-radius: 3px;         /* CSS3 */
-moz-border-radius: 3px;    /* Firefox */
-webkit-border-radius: 3px; /* Safari,Chrome */


------------------------------------------------------------*/

を追記します。(/*----    ----*/を除く文字のみ)

以上で角が丸くなります。
(線の太さや角の丸みの数値はお好みで調節して下さい。)


参考にさせて頂いたサイト⇒ All About form
詳しい解説もそちらでどうぞ。



次回は「画像を使わずにCSSで枠線(border)の角を丸くする方法!」を応用して「CSS 角丸border 活用術」をご紹介します。
(角丸にして縦横の線の太さを変える方法)

001-00002.jpg 


画像を使わずにCSSで枠線(border)の角を丸くする方法!」を活用してこんな事も出来ます。

楽ランク TVゲーム (楽天市場こだわりランキングTOP30)

>>続きを読む

スポンサーサイト

PR Link



☆動画MYページはこちら

バイオハザード オペレーション・ラクーンシティ バナー(120×60)









Link

このブログをリンクに追加する



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。