CSS `<line-width>` データ型

<line-width> 列挙値型は、線の幅、あるいは線がない状態を定義する長さまたはキーワード値を表します。<line-width> のキーワード値は、以下の個別指定プロパティおよび一括指定プロパティで使用されています。

構文

値

<line-width> 型は、<length> またはキーワードのいずれかを使用して指定します。

<length>: 負ではない <length> です。
hairline: 1px 以下で、「かろうじて見える」線を表します。
thin: 1px と同じです。
medium: 3px と同じです。
thick: 5px と同じです。

形式文法

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

例

線の太さを定義

この例では、すべての <line-width> キーワード値と、<length> 値を併せて示しています。

HTML

<section> 要素の中に 5 つのボックスを設置しました。

html

<section>
  <div data-width="hairline">hairline</div>
  <div data-width="thin">thin</div>
  <div data-width="medium">medium</div>
  <div data-width="thick">thick</div>
  <div data-width="10px">10px</div>
</section>

CSS

すべての要素のスタイルを統一した後、要素の data-width 属性に基づいて border-width を設定します。

css

section {
  display: flex;
  gap: 10px;
}
div {
  flex: 0 0 15%;
  border-style: solid;
  border-color: purple;
  text-align: center;
}
[data-width="hairline"] {
  border-width: hairline;
}

[data-width="thin"] {
  border-width: thin;
}

[data-width="medium"] {
  border-width: medium;
}

[data-width="thick"] {
  border-width: thick;
}

[data-width="10px"] {
  border-width: 10px;
}

@supports not (border-width: hairline) {
  body::before {
    content: "このブラウザーは 'hairline' 値に対応していません。";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}