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

CSSでページに刻まれたように見える枠線を設定する方法（border-style: groove）

HTML要素の周囲に、ページに彫り込まれたような立体感のある枠線を設定したい場合は、CSSのborder-styleプロパティに「groove」の値を指定します。grooveは、境界線が溝として刻み込まれているかのように見せるスタイルで、ボックスに奥行きを持たせたいときに便利です。

grooveを使った実装例

以下のコードでは、比較のため「none」（枠線なし）を指定した段落と、「groove」を指定した段落を並べて表示しています。実際にブラウザで実行して、表示の違いを確認してみてください。

<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:groove;">
         This is a border carved into the page.
      </p>
   </body>
</html>

実装時のポイント

grooveスタイルでは、指定した枠線の色をもとに明暗の陰影が自動的に描画され、溝状の立体表現が生まれます。また、border-styleプロパティだけを指定しても枠線は表示されないため、border-widthで太さを一緒に設定することを忘れないようにしましょう。

  1. CSSでボーダー（境界線）に点線を設定する方法

    CSSで要素の境界線（ボーダー）に点線を表示したい場合は、border-style プロパティに dotted を指定します。点線の太さは border-width プロパティ、色は border-color プロパティでそれぞれ調整できます。基本的な使い方以下のように、border-width と border-style を組み合わせて指定するのが基本の書き方です。<html>    <head>    </head>    <body>       &

  2. CSSで境界線（ボーダー）のスタイルを設定する方法

    CSSで要素の境界線（ボーダー）のスタイルを設定するには、border-style プロパティを使用します。このプロパティにより、以下のようなさまざまなスタイルから好みのボーダーを選択できます。 border-styleで指定できる主な値 none： 境界線を表示しません。 solid： 1本の実線で表示されます。 dotted： 点線（ドットの連続）で表示されます。 dashed： 破線（短い線分の連続）で表示されます。 double： 2本の実線で表示されます。 groove： ページに刻み込まれたような凹凸のある立体的な線で表示されます。 ridge： grooveの逆で、盛り上がって