CSSのborder-styleに「double」とかってあったのね…

border

見出しデザインの参考にしたい CSSで作るhタグのサンプル集」を読んでいて「へー」と思ったのでショートエントリー。CSSのborder-styleって「solid」「dotted」ぐらいしかないと思っていたのですが(僕だけじゃないと信じたいたい!)、他にもいろいろあるのですね。

ざっと紹介すると…。

  • none: 枠線なし
  • hidden: noneと同じだけどtableの枠線と衝突しちゃうときに使う
  • dotted: 点線
  • dashed: ダッシュ(点線よりちと長い)
  • solid: 普通の線
  • double: 二重線
  • groove, ridge, inset, outset: 3Dっぽい効果を出す
  • inherit: 親要素から継承

ブラウザの対応状況に気を付ける必要がありますが、うまく使えば枠線だけでさまざまなスタイルが作れるかもですね。画像つかうのがどうもね、というときに検討したいところです。

» CSS border-style property

Pocket

SPONSORED LINK

Leave a Reply

Your email address will not be published. Required fields are marked *