Webフロントエンド-11-css-枠線プロパティ


css枠線プロパティ


1.borderプロパティ
(1)border:複合プロパティオブジェクトの枠線のプロパティを設定します.この複合プロパティを使用して単一のパラメータを定義すると、他のパラメータのデフォルト値はそれぞれの対応する単一のプロパティ設定を無条件に上書きします.
(2)例えばborder:1 px solid red;
オブジェクトの枠線幅の設定または取得
オブジェクトの枠線スタイルの設定または取得
オブジェクトの枠線色の設定または取得



    
    css     
    


    


2.border-colorプロパティ
(1)border-color:オブジェクトの枠線色を設定または取得します.
①すべての4つのパラメータ値を指定すると、上、右、下、左の順に4辺に作用します.
②1つだけ提供される場合は、すべての四辺に使用されます.
③2つを指定すると、1つ目は上、下、2つ目は左、右になります.
④3つを指定すると、1つ目は上、2つ目は左、右、3つ目は下になります.
 
3.border-styleプロパティ
(1)border-style:オブジェクトの枠線スタイルを設定または取得します.
①すべての4つのパラメータ値を指定すると、上、右、下、左の順に4辺に作用します.
②1つだけ提供される場合は、すべての四辺に使用されます.
③2つを指定すると、1つ目は上、下、2つ目は左、右になります.
④3つを指定すると、1つ目は上、2つ目は左、右、3つ目は下になります.
(2)値を取る:
dotted:点状の輪郭.
dashed:破線の輪郭.
solid:実線輪郭.
double:二重線の輪郭.2つの単線とその間隔の和は、指定したborder-width値に等しい
groove:3 D溝の輪郭.
ridge:3 D凸溝プロファイル.
inset:3 D凹み輪郭.
outset:3 Dフランジ輪郭
 
4.border-widthプロパティ
(1)border-width:オブジェクトの枠線幅を設定または取得する
①すべての4つのパラメータ値を指定すると、上、右、下、左の順に4辺に作用します.
②1つだけ提供される場合は、すべての四辺に使用されます.
③2つを指定すると、1つ目は上、下、2つ目は左、右になります.
④3つを指定すると、1つ目は上、2つ目は左、右、3つ目は下になります.
 
5.border-radiusプロパティ
(1)border-radius:オブジェクトをフィレットボーダーで設定または取得します.