8.css border_html/css_WEB-ITnose

実際、私は CSS ボックス モデルをボックスと呼ぶ代わりに、カード、またはピクチャーと呼びたいと思っています。ボックスの 3 次元効果と比較して、Web ページの要素は 2 次元の画像に近いためです。要素サイズの調整は、キャンバスの調整に似ています。

しかし、画像にフレームを付けることができるのと同じように、要素に境界線を設定することもできます。

1ボーダースタイルスタイル名Set the border style, required 1border-colorcolor valueSet the border color,Optional1

属性	値	説明	CSSバージョン
border-width	長さの値	境界線の幅を設定します(オプション)

これら3つの属性値のうち、border-styleのみが必須です 宣言、境界線が表示されることがあります。他の 2 つの属性にはデフォルト値があり、幅のデフォルトは 3px、色のデフォルトは黒です。

/*简单设置*/div {     border-style: solid; }/*完整设置*/div {     border-style: solid;     border-width: 2px;     border-color: red; }

注：絵に額を付けて美術館（つまりウェブサイト）に展示に持ち込むと、美術館の訪問者が見る絵のサイズはもはやキャンバスはキャンバスのサイズではなく、キャンバスの境界線です。ここでのボーダーの設定は、一方の辺に対するものです。つまり、実際の幅と高さは、キャンバス + 片面のボーダー * 2 となるはずです。

各属性の詳細な使用法を以下にまとめます。

1. 境界線の幅

値 説明 長さの値 CSS 長さの値: px、em など。 パーセンテージパーセンテージを直接設定します: 1、2、 3 etcthin 長さの名前を使用したデフォルトの幅。これら 3 つの値の具体的な意味はブラウザによって定義され、小さい値から大きい値へと増加しますmediumthick

2. 境界線のスタイル

価値説明 ... 二重境界線溝境界線 要素コンテンツにインライン効果を持たせる境界線 outset を作るボーダー要素コンテンツには凸効果がありますridgeRidge bordersolidsolid Line border3. 境界線の色 色境界線には実際には特別な値はありません。設定方法はこのブログを参考にしてください。 4. 個別にカスタマイズする 上記の設定方法はすべて4辺のもので、ボーダーのセットを購入するのと同等です。ただし、必要に応じて 4 つの側面をカスタマイズできます。 プロパティ説明CSSバージョン

	double
	groove
	inset
CSSカラー

border-top-width

border-top-styleborder-top-color

define top

1

bottomを定義左側を定義右側を定義

ボーダー-bottom-width

border-bottom-style

border-bottom-color

1

border-left-width

border-left-style

border-left-color

1

border-right-width

border-right-style

border-right-color

1

 

/*只要其中的一条边*/div {     border-top-style: solid;     border-top-width: 10px;     border-top-color: red; }

 

 

 

5.简写设置

　　为了提高销量，商家还提高了快速下单服务，当四条变都一致，那么没必要分写成三句样式，直接通过简写即可：

属性	值	说明	CSS 版本
border	aeed8893f82f06a326658806eca6bb17 b9af1eb14abb22702b7e37951d41b4e1 6a51c234445238b1086bb6cd01116418	设置四条边的边框	1
border-top		只设置上边框
border-bottom		只设置下边框
border-left		只设置左边框
border-right		只设置右边框

 

/*简写形式四条边设置 */div {     border: 10px solid red; }

 

 

6.圆角边框

　　虽然商家提供了各种样式的边框，但是这些边框都是方方正正的，为了满足顾客的要求，商家又去拿了一批新货，开始提供圆角边框了。

属性	值	说明	CSS 版本
border-radius	长度值或百分数	四条边角	3
border-top-left-radius		左上边角
border-top-right-radius		右上边角
border-bottom-left-radius		左下边角
border-bottom-right-radius		右下边角

 

/*设置圆角矩形*/div {     border: 10px solid red;     border-radius: 10px; }/*四条边分别设置*/div {     border: 10px solid red;     border-radius: 10px 20px 30px 40px; }