HR {
  color: #ffff00; /* 線の色(IE用) */
  background-color: #ffff00; /* 線の色(NN用) */
  height: 8px; /* 線の太さ */
  border: 3px; /* 枠の太さ */
  border-color: #0000ff; /* 枠の色 */
  border-style: double; /* 枠の種類 */
}

→ 点線にする１

サンプル

HR {
  color: #ff0000; /* 線の色(IE用) */
  background-color: #ff0000; /* 線の色(NN用) */
  height: 3px; /* 線の太さ */
  border: 3px; /* 枠の太さ */
  border-style: dashed; /* 枠の種類 */
}

→ 点線にする２

サンプル

HR {
color: #ff0000; /* 線の色(IE用) */
  background-color: #ff0000; /* 線の色(NN用) */
  height: 5px; /* 線の太さ */
  border: 5px; /* 枠の太さ */
  border-style: dotted; /* 枠の種類 */
}

→ 水平線のボーダーを立体にする

サンプル

HR {
  color: #5555ff; /* 線の色(IE用) */
  background-color: #5555ff; /* 線の色(NN用) */
  height: 9px; /* 線の太さ */
  border: 3px; /* 枠の太さ */
  border-color: #6666ff; /* 枠の色 */
  border-style: inset; /* 枠の種類（サンプル下段にするには"outset"にする） */
}

水平線・メニュー

→ 水平線の基本的な指定方法
→ 立体的な水平線
→ 点線・二重線など
→ グラデーションなどのフィルタ
→ 画像を使った水平線

← スタイルシートに戻る

eWeb