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

CSSのoutline-styleで溝（groove）型のアウトラインを設定する方法

outline-styleプロパティで溝（groove）を設定する

要素のアウトライン（外枠）を溝のように表示したい場合は、CSSのoutline-styleプロパティの値にgrooveを指定します。grooveを設定すると、アウトラインがページの表面に彫り込まれているかのような、立体的な凹み効果を持つ枠線が表示されます。

サンプルコード

<html>
    <head>
    </head>
    <body>
        <p style = "outline-width:3px;outline-style:groove;">
            This text is having 3px groove outline.
        </p>
    </body>
</html>

この例では、段落に対して幅3pxのgrooveスタイルのアウトラインが適用され、「This text is having 3px groove outline.」というテキストの周囲に溝状の枠線が描画されます。

実装のポイント

  • outline-widthとの併用： outline-styleのみを指定しても初期値の幅では表示が確認しにくいため、上記の例のようにoutline-widthを組み合わせて指定するとよいでしょう。
  • 色による立体感： grooveの凹んだような見た目は、outline-colorで指定した色をもとに明暗が自動的に付けられることで表現されます。
  • ridgeとの違い： ridge（浮き出た稜線）は逆の効果で、grooveは「掘られた」ように、ridgeは「盛り上がった」ように見えます。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"