回転ページフィレットコード(純CSS)

ウェブサイトの統計から多くの友达がフィレットコードを探すためにここに来たのを見て、みんなを失望させないために2つのフィレットチュートリアルを書き直しました.この1つは純CSSでフィレットを作る方法で、もう1つは画像を利用してフィレットを作る方法です.
近い将来、フィレット効果が必要になると信じています.CSS 3にはフィレット効果が付いていますが、今では多くのブラウザがCSS 3をサポートしています.ゴミのMS IEを除いて.

フィレット円弧1:

まず、最も簡単な弧が1の円角についてお話しします.上図はフィレットdivを20倍に拡大する効果で、図中のフィレットボックスには4本の線があり、上から下まで3つのdivで構成されていると見なすことができます.
3つのdivはそれぞれ赤と黄の枠で描きました.このような角の塊はこの3つのdivで作られました.
1番目と3番目(赤枠)のdiv高さは1 px、左右の余白は1 px、線は背景色(background)で、CSSは以下の通りです.

.flt1-a { height: 1px; margin: 0 1px; background: #333; }

2番目の(黄枠)divの高さは自動的に伸び、線は左右の辺線(border)で表示されます.

.flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }

皆さんに注意してください.IE 6の下で、divの高さの値を小さく設定します.IE 6ブラウザは正確な解釈をすることができません.いつも会長が出てきます.そのため、設定の高さの超過部分を隠すために、IE 6にCSSをもう1段書く必要があります.

.flt1-a { overflow: hidden; }

そしてHTMLのあるdivコンテナに彼の構造を書きます.

<div class="fillet-box">

	<div class="flt1-a"></div>

	<div class="flt-m">

		   1     

	</div>

	<div class="flt1-a"></div>

</div>

最終的な効果:
 
円弧1のフィレットのデモ
 

フィレット円弧2:

上の図は弧度が2の円角で、それを5つのdivと見なすことができて、1つ目と最後のdiv(赤枠)のスタイルは同じです:高さ1 px、左右の余白2 px、線は背景色(background)で現れて、CSSは以下の通りです:

.flt2-a { height: 1px; margin: 0 2px; background: #333; }

2番目と4番目の(黄枠)divの高さは1 px、左右の余白は1 pxで、線は辺線(border)で現れ、CSSは以下の通りである.

.flt2-b { height: 1px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }

3番目(青枠)divの高さは自動的に伸び、線は左右の辺線(border)で表示されます.

.flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }

IE 6:

.flt2-a,

.flt2-b { overflow: hidden; }

そしてHTMLのあるdivに彼の構造を書きます.

<div class="fillet-box">

	<div class="flt2-a"></div>

	<div class="flt2-b"></div>

	<div class="flt-m">

		   2     

	</div>

	<div class="flt2-b"></div>

	<div class="flt2-a"></div>

</div>

最終的な効果:
 
 
円弧2のフィレットのデモ
 
 

フィレット円弧3:

最初と最後のdiv(赤枠)CSS:

.flt3-a { height: 1px; margin: 0 3px; background: #333; }

2番目と6番目のdiv(黄枠)CSS:

.flt3-b { height: 1px; margin: 0 1px; border-left: 2px solid #333; border-right: 2px solid #333; }

3番目と5番目のdiv(青枠)CSS:

.flt3-c { height: 1px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }

4番目(緑枠)CSS:

.flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }

IE 6:

.flt3-a,

.flt3-b,

.flt3-c { overflow: hidden; }

そしてHTMLのあるdivに彼の構造を書きます.

<div class="fillet-box">

	<div class="flt3-a"></div>

	<div class="flt3-b"></div>

	<div class="flt3-c"></div>

	<div class="flt-m">

		   3     

	</div>

	<div class="flt3-c"></div>

	<div class="flt3-b"></div>

	<div class="flt3-a"></div>

</div>

最終的な効果:
 
 
 
円弧3のフィレットのデモ
 
 
 

フィレット円弧4:

これからは説明しませんが、CSSとHTMLだけを載せます.
CSS:

.flt4-a { height: 1px; margin: 0 4px; background: #333; }

.flt4-b { height: 1px; margin: 0 2px; border-left: 2px solid #333; border-right: 2px solid #333; }

.flt4-c { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }

/* for ie6 */

.flt4-a,

.flt4-b,

.flt4-c { overflow: hidden; }

HTML:

<div class="fillet-box">

	<div class="flt4-a"></div>

	<div class="flt4-b"></div>

	<div class="flt4-c"></div>

	<div class="flt-m">

		   4     

	</div>

	<div class="flt4-c"></div>

	<div class="flt4-b"></div>

	<div class="flt4-a"></div>

</div>

最終的な効果:
 
 
 
円弧4のフィレットのデモ
 
 
 

フィレット円弧5:

CSS:

.flt5-a { height: 1px; margin: 0 5px; background: #333; }

.flt5-b { height: 1px; margin: 0 3px; border-left: 2px solid #333; border-right: 2px solid #333; }

.flt5-c { height: 1px; margin: 0 2px; border-left: 1px solid #333; border-right: 1px solid #333; }

.flt5-d { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }

/* for ie6 */

.flt5-a,

.flt5-b,

.flt5-c,

.flt5-d { overflow: hidden; }

HTML:

<div class="fillet-box">

	<div class="flt5-a"></div>

	<div class="flt5-b"></div>

	<div class="flt5-c"></div>

	<div class="flt5-d"></div>

	<div class="flt-m">

		   5     

	</div>

	<div class="flt5-d"></div>

	<div class="flt5-c"></div>

	<div class="flt5-b"></div>

	<div class="flt5-a"></div>

</div>

最終的な効果:
 
 
 
 
円弧5のフィレットのデモ
 
 
 
 
分かったか?理解したら以下の効果を自分でやってみてください:1.背景色のあるフィレット効果を作成します.2.フィレット円弧が8のフィレット効果を作成します.3.枠線が2 pxのフィレット効果を作成します.
ヒント:実は丸いHTMLラベルは、divを使う必要はありません.コードを簡潔にするために、CSSでdisplay:blockを使うだけで、、などの短い要素を使ってもいいです.それらをブロック級元素に明記すればいい.しかし、一部の要素はすでにXHTMLに捨てられているか、XHTMLの検証に合格できないので、理想的なラベルを自分で吟味して選択してください.
純CSSフィレットの利点:1.画像がなく、ロード速度が速く、フィレットロードの遅延などは発生しません.2.画像に限らず、枠線の色や背景を自由に変えることができます.
純CSSフィレットの欠点:1.ギザギザ感が強い.2.コードが煩雑で読みにくく、構造が意味化されず、XHTMLの精神から逸脱している.3.背景色を変えるのが難しく、弧が大きいほど背景色を変えるのが難しくなります.4.大きな丸みを作るときは、丸みを構成する線を理解しにくく、一定の描画能力が必要です.