CSS-ボックスボーダー、フィレットボーダー(CSS 3)

1782 ワード

ボックスボーダー


枠はその皮です.みかんの皮.柚子の皮.オレンジの皮...
構文:
border : border-width || border-style || border-color 

「枠線プロパティ」(Border-style)-枠線スタイルを設定します.
枠線スタイルは、ページ内の枠線のスタイルを定義するために使用されます.一般的なプロパティ値は次のとおりです.
none:              (   )

solid:      (     )

dashed:       

dotted:     

double:      

箱の枠の書き方まとめ表


設定内容
スタイルのプロパティ
共通属性値
上ボーダー
border-top-style:スタイル;border-top-width:幅;border-top-color:色;border-top:幅スタイルの色;
下ボーダー
border-bottom-style:スタイル;border-bottom-width:幅;border-bottom-color:色;border-bottom:幅スタイルの色;
左ボーダー
border-left-style:スタイル;border-left-width:幅;border-left-color:色;border-left:幅スタイルの色;
右ボーダー
border-right-style:スタイル;border-right-width:幅;border-right-color:色;border-right:幅スタイルの色;
スタイルの統合
border-style:上辺[右下辺左];
Noneなし(デフォルト)、solid単実線、dashed破線、dotted点線、double二実線
幅の総合設定
border-width:上辺[右下辺左];
ピクセル値
色の総合設定
border-color:上[右下左];
色値、#16進数、rgb(r,g,b)、rgb(r%、g%、b%)
枠線の総合設定
border:四辺幅四辺スタイル四辺色;
	border-top: 1px solid red; /*   */
	border-bottom: 2px solid green; /*   */
	border-left: 1px solid blue;
	border-right: 5px solid pink;
	
	border: 1px solid red;

表の細い線の枠線


以前習ったhtml表の枠が太くて、ここではCSSの一言で美しくなります.CSSは私たちの白馬王子(白雪姫)だと信じています.
table{ border-collapse:collapse; } collapse単語は合併の意味です
border-collapse:collapse; 隣接する枠線が結合されていることを示します.

フィレットボーダー(CSS 3)


それから、私たちの世界は矩形だけではありません.radius半径(距離)
構文の形式:
border-radius: 50%;