CSS のどのプロパティで境界線の幅を指定しますか?

CSS では、「border」プロパティは、div などの HTML 要素に境界線を適用するために使用されます。さらに、さまざまな境界線、色、幅、その他のスタイルを設定することもできます。

このチュートリアルでは、要素の境界線の幅を設定するさまざまな方法を学びます。さらに、要素のさまざまな側面の幅を設定する方法を学びます。

border-width CSS プロパティを使用して境界線の幅を設定します

「border-width」CSS プロパティは、境界線の幅を定義するために使用されます。ユーザーは、これら 4 つの値を通じてさまざまな辺の幅を設定できます。ただし、最後の 3 つの値はオプションです。

境界線の幅として単一の値を使用すると、4 辺すべてに同じ境界線の幅が適用されます。 2 つの値を渡すと、最初の値は上下の境界線の幅として処理され、2 番目の値は左右の境界線の幅として処理されます。

＃＃＃文法＃＃＃

ユーザーは、CSS の「border-width」プロパティを使用して、次の構文に従って境界線の幅を設定できます。

リーリー

上記の構文では、まず、すべての辺に異なる幅を定義します。その後、上下左右に異なる幅を定義し、すべての辺に同じ境界線の幅を定義します。

＃＃＃例＃＃＃

以下の例では、div 要素を作成し、ボーダー要素に「5px」のボーダー幅を設定します。出力では、ユーザーは破線スタイルの赤い境界線を確認できます。

リーリー ＃＃＃例＃＃＃

以下の例では、CSS の「border-width」プロパティを使用して、要素の 4 辺すべてに異なる境界線の幅を設定します。上枠の幅を「5px」、右枠の幅を「10px」、下枠の幅を「15px」、左枠の幅を「20px」に設定します。

出力では、ユーザーは div 要素の両側で異なる境界線の幅を確認できます。

リーリー

border CSS プロパティを使用して境界線の幅を設定します

「border」CSS プロパティには 3 つの値があります。最初の値は境界線の幅を指定し、2 番目の値は境界線のスタイルを指定し、3 番目の値は境界線の色を指定します。

ここでは、境界線の幅を設定する最初の値に焦点を当てます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って CSS プロパティ「border」を使用して境界線の幅を設定できます。

リーリー ＃＃＃例＃＃＃

以下の例では、CSS プロパティ「border」の「1rem Solid blue」値により、幅 1rem、赤、および単色のスタイルの境界線が設定されます。境界線の幅を変更するには、最初の値を変更する必要があります。

リーリー ＃＃＃例＃＃＃

CSS では、「細」、「中」、「太」の値を使用して境界線の幅を設定することもできます。 「thin」の値は細い境界線を設定し、「medium」の値は「thin」の境界線よりも広い境界線の幅を設定し、「thick」の値は「medium」よりも広い幅を設定します。

以下の例では、3 つの div 要素を取得し、ユーザーが出力で確認できる「border」CSS プロパティを使用して異なる境界線の幅を指定しています。

リーリー

特定の辺の境界線の幅を設定する

「border-top-width」CSS プロパティを使用すると、ユーザーは上枠の幅を設定できます。さらに、ユーザーは CSS プロパティ「border-right-width」、「border-bottom-width」、「borderleft-width」を使用して、要素の右枠、下枠、左枠の幅をそれぞれ設定できます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、さまざまな CSS プロパティを使用して、さまざまな辺の境界線の幅を設定できます。

リーリー ＃＃＃例＃＃＃

以下の例では、4 つの異なる div 要素を作成します。最初の div 要素の上端の幅、2 番目の div 要素の右端の幅、3 番目と 4 番目の要素の下端と左端の幅を設定します。

リーリー

結論

ユーザーは、さまざまな CSS プロパティを使用して HTML 要素の境界線の幅を設定する方法を学びました。 CSS プロパティ「border-width」と「border」を使用して境界線の幅を設定する方法を学びました。さらに、要素の異なる側面に異なる境界線の幅を設定する方法を学びました。

以上がCSS のどのプロパティで境界線の幅を指定しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。