スポンサーサイト

ボックスの枠線の種類を指定する

書式

border-color: 値 <全枠線の種類を一括指定>
border-top-color: 値 <上線の種類を指定>
border-right-color: 値 <右線の種類を指定>
border-bottom-color: 値 <下線の種類を指定>
border-left-color: 値 <左線の種類を指定>

枠線の種類を指定します。値には枠線の種類のキーワードを指定します。キーワードは以下の通りです。

・solid: 実線
・double: 二重線
・dotted: 点線
・dashed: 破線
・groove: 二重線で内側がへこんで見える線
・ridge: 二重線で浮き上がって見える線
・inset: 線に囲まれた範囲全体がへこんで見える線
・outset: 線に囲まれた範囲全体が浮き上がって見える線

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

}

boxsample1では全枠線の種類を一括して指定し、boxsample2ではそれぞれに枠線の種類を指定しました。
記事部分
<p class = "boxsample1">このボックス領域の枠線の種類は一括して指定しました。</p>
<p class = "boxsample2">このボックス領域の枠線の種類は上、右、下、左それぞれ指定しました。</p>
表示

このボックス領域の枠線の種類は一括して指定しました。

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

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

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

前後の記事

最近の記事

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