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%;