スポンサーサイト

ボックスの枠線ごとに一括指定する

書式

border-top: 値1 値2 値3<上線のスタイルを一括指定>
border-right: 値1 値2 値3<右線のスタイルを一括指定>
border-bottom: 値1 値2 値3<下線のスタイルを一括指定>
border-left: 値1 値2 値3<左線のスタイルを一括指定>

枠線のスタイルを上、右、下、左線ごとに一括して指定します。
値1には枠線の太さ(border-width)
値2には枠線の種類(border-style)
値3には枠線の色(border-color)を指定出来ます。
それぞれ半角スペースで区切って指定して下さい。

スタイルシート部分
.boxsample1 {
background-color: #ffffcc;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #ffcc00;
border-right-width: 20px;
border-right-style: double;
border-right-color: #ffff00;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #ffcc00;
border-left-width: 20px;
border-left-style: double;
border-left-color: #ffff00;
}
.boxsample2 {
background-color: #ffffcc;
border-top: 10px solid #ffcc00;
border-right: 20px double #ffff00;
border-bottom: 10px solid #ffcc00;
border-left: 20px double #ffff00;

}

boxsample1では全枠線の上、右、下、左のスタイルを個別に指定し、boxsample2ではスタイルをそれぞれ一括指定しました。表示は両方同じになります。
記事部分
<p class = "boxsample1">このボックス領域の枠線の上、右、下、左のスタイルはそれぞれ指定しました。</p>
<p class = "boxsample2">このボックス領域の枠線上、右、下、左のスタイルを一括指定しました。</p>
表示

このボックス領域の枠線の上、右、下、左のスタイルはそれぞれ指定しました

このボックス領域の枠線上、右、下、左のスタイルを一括指定しました。

記事を飾ろう!トップ
マージン、パディング基礎
背景色を指定する
背景画像を指定する
枠線幅を指定する
枠線色を指定する
枠線の種類を指定する
枠線ごとに一括指定する
幅、高さを指定する
ボックスサンプル集

次のキーワードを検索:[スタイルシート]

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。