CSSの線についてpc操作中

css下線の引き方

border-bottom: pxやカラー名 線のスタイル;

太さ・スタイル・色を指定。指定する順番は決まっておらず、半角スペースで区切って記述します。

スタイル 下に1本だけ線を引くには、「 border-bottom: solid ;」

上に1本引きたいなら、 「border-top: solid ;」

点線を1本引きたいなら、 「dotted」

破線なら「dashed」、二重線なら「double」 など、いくつかあります。
外部リンク参考サイトさん css線の引き方

マーカー風

文字にマーカー風のラインを引きます。

セレクタ{background:linear-gradient(transparent 数値%, 線の色 0%)}

transparentの後ろの%で線の太さを決めます。数値が高いほど線が細く、また、低いほど線が太くなります。

左右の線の設定

border-left:

border-left: 数値px スタイル カラー名;

border-right:

border-right: 数値px スタイル カラー名;

枠線の設定

要素 {border: 太さ スタイル 色;}

要素に対して、borderプロパティを使用。
太さ、色、スタイルをまとめて上下左右の枠線を設定します。それぞれ半角スペースで区切ります。

外部リンク参考サイトさん
・枠線のつけかた　やや応用 　・上下左右別枠線のつけかた 　・枠線のつけかた　きほん

区切り線、水平線（hr）の装飾

まず、デフォルトで設定されているhr要素のスタイルをcssでそれぞれリセットする

hr { height: 0; margin: 0; padding: 0; border: 0; }

それぞれ、 height: 0;で高さをリセット　 margin: 0; でマージンをリセット 　padding: 0; でパディングをリセット　 border: 0;ボーダーをリセット

外部リンク参考サイトさん 区切り線、水平線の装飾

楽しくpc