CSS3 境界線のレビュー_html/css_WEB-ITnose

1. はじめに: border 属性は、要素の境界線のスタイルを設定し、さまざまな境界線、色、太さを設定するために使用されます。

2. 3 つの型の値を含みます。 1) border-width: 要素の境界線の太さを設定します。デフォルトは 3~4px です

(2) border-color: 要素の境界線の色を設定します。デフォルトの色はフォントの色です

(3) border-style : 要素のボーダーのタイプを設定します。デフォルトは [none ] です。
省略構文: border:border-width border-style border-color;
注: 省略後の各属性はスペースで区切られており、属性間に順序はありません。
3. Web の実際の制作では、CSS は [TRBL] の原則に従って、異なる側に異なるスタイルを設定できます:
border 。 -top-style (要素の上の境界線の種類を設定します)
border-right-style (要素の右の境界線の種類を設定します)

border-bottom-style (要素の下の境界線の種類を設定します)

border-left-style (要素の右の境界線の種類を設定します)要素の左側のボーダーの種類)
同様に: border-color と border-width は独立して設定できます
注: この個別の設定方法は 4 つの状況に分けられます: (1) 1 つの値が使用される場合、それは 4 つの辺が設定されることを意味します同じ (2) 値が 2 つある場合、最初の値は上下を表し、2 番目の値は左右の 3 つの値を表す場合 (3)、最初の値は上側を表します(4)の値が4つある場合は、上、右、下、左の順になります。右回りの方向設定
超組み合わせ法: li{border:solid 1px red;border-width:1px 0;}, たった2行のコードで要素liの上下を1pxの赤実線で表現します。これにより、コードの保守が容易になり、CSS のパフォーマンスが向上します
スーパー結合メソッドによって引き起こされた考え: 突然ひらめきを感じました。毎日簡単に border を使用できるようになったと言えますが、まだ一度もありません。とても恥ずかしいので、書いてみんなにシェアしましょう
(1) 要素にストロークを 1 つ設定します: この場合、border-T/R/B/L メソッドを使用して設定します。最適な方法
(2) 要素上に 2 つのストロークを設定する (位置が反対または接続されている) : この場合、組み合わせ方法を使用する方が良いです
(3) 要素上に 3 つのストロークを設定するのが良い: この場合この場合、結合法を使用した方が良いです
(4) 要素に 4 つのストロークを設定した方が良いです: この場合、結合法を使用した方が良いです
もちろんこれらもあります ストロークがそれらが異なる場合は、異なる属性に対して T/R/B/L を使用するだけです。 要約: 将来的には、問題を階層化し、さまざまな角度から検討する必要があります。

4. : 境界線スタイルの値リスト

上記の 11 個の値は、各ブラウザーで異なる効果を持ちます。最も予測不可能な境界線スタイルは、2 つの線の幅と線の間の幅を決定できません。また、点線、破線、アウトセット、インセットは、異なるブラウザーで一貫していることは保証できません

他にどのような CSS3 境界線があるか: border-image、border-radius、box-shadow

5.border-radius 設定

TRBL ルールに従ってください (上/右/下/左)、円の 4 分の 1、2、3、4 の値を設定できます。例: border-radius: 60px 40px 30px 20px; 水平方向と垂直方向の半径の値を設定します。別途: (楕円の 4 分の 1 です)

border-radius: 60px 40px 30px 20px / 30px 20px 10px 5px;

6. 特別なアプリケーション

(1) border-radius には内側の半径と外半径、要素境界値 大きいほど効果が顕著になります。 border-radius の半径の値が境界線の太さ以下の場合、要素の境界線の内側に角丸効果はありません



要素の内側の半径 = 外側の半径 - 境界線の幅

( 2) 2 つ目は、要素が隣接していることです。辺の幅が異なります。この角は、広い辺から狭い辺に滑らかに移行します。要素の隣接する角は、大きい辺から狭い辺まで変化します。 small

また、画像は丸みを帯びている必要があり、実際には、border-width と border-radius の間の競合を避けるために、border-width を追加する必要はありません。

(3) 互換性

円(4つの属性を設定)、半円(2つの属性を設定)、扇形(1つの属性を設定)、楕円(x/y)を作成

7.box-shadow

が使用可能境界線として、内側と外側の半径の区別はなく、構造内で計算されません ;

複数のレイヤーの影はカンマ [,] で区切られます

IE8 より前のバージョンと互換性があり、IE のフィルターを使用できますシミュレートするには:

filter:progid:DXImageTransform.Microsoft.Shadow(color="カラー値",Direction= 影の半径 (数値),Strength= 影の半径 (数値))