Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSで境界線のスタイルを設定します

境界線のスタイルを設定するには、 border-style 財産。 border-styleプロパティを使用すると、次の境界線のスタイルのいずれかを選択できます。

  • なし： 国境なし
  • 実線： 境界線は単一の実線です。
  • 点線： 境界線は一連のドットです。
  • 破線： ボーダーは一連の短い線です。
  • ダブル： 境界線は2本の実線です。
  • 溝： 境界線はページに刻まれているように見えます。
  • 尾根： 境界線は溝の反対に見えます。
  • 挿入図： 境界線を使用すると、ボックスがページに埋め込まれているように見えます。
  • 最初： ボーダーは、ボックスがキャンバスから出てきているように見せます。
  • 非表示： テーブル要素の境界の競合の解決を除いて、noneと同じです。

例

次のコードを実行して、境界線のスタイルを設定してみてください。

<html>
   <head>
   </head>
   <body>.
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
   </body>
</html>

  1. CSSで境界線の画像幅を設定する

    border-image-widthプロパティは、CSSで境界線の画像の幅を設定するために使用されます。 例 次のコードを実行して、border-image-widthプロパティを実装してみてください- <html>    <head>       <style>          #borderimg1 {             border: 15px solid transparent;

  2. CSSを使用して下の境界線のスタイルを設定します

    下の境界線のスタイルを設定するには、border-bottom-styleプロパティを使用します。設定できる境界線の値は、点線、二重、破線、実線などです。 例 次のコードを実行して、下の境界線のスタイルを設定できます <!DOCTYPE html> <html>    <head>       <style>          p.dotted {border-bottom-style: dotted;}