サイト内検索

...スタイルシート(css)...

スタイルシート・ボックス

borderの種類(border-style)

borderの種類はborder-styleプロパティを指定します。
[使い方]
.sample{border-style: dotted;}
border-style : 上下左右をまとめて指定します。
border-style:
この部分には↓のいずれかを指定します。
top
right
bottom
left
-width:

[borderの指定方法]
プロパティ名
(サンプル)
説明
border-style:dotted;上下左右 の
種類の指定を指定します。
border-style:dotted solid;上下・左右の
種類を指定します。
border-style:dotted solid dashed;上・左右・下の
種類を指定します。
border-style:dotted solid dashed double;上・右・下・左の
種類を指定します。

[個別の設定方法]
プロパティ名
(サンプル)
説明
border-top-style:dotted;上の枠線の種類を指定します。
border-right-style:solid;右の枠線の種類を指定します。
border-bottom-style:dashed;下の枠線の種類を指定します。
border-left-style:double;左の枠線の種類を指定します。

[枠線の種類]
説明 表示例
solid普通の線

solid

double二重の線

double

dotted●の点線

dotted

dashed■の点線

dashed

groove谷型の線

groove

ridge山型の線

ridge

inset凹型

inset

outset凸型

outset

none線なし(標準値)

none

サンプル

[headの中]

<style type="text/css">
<!--
.sample{
order-width: thin;
border-style: solid;
border-color: #ccff99;
}
h3,h4{
border-width: 10px;
border-color: #ccff99;
}
.sample1{
border-style: dotted;
width: 400px;
}
.sample2{
border-top-style: outset;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: solid;
width: 400px;
}
-->
</style>

[bodyの中]

みどりの
<span class="sam">
枠線
</span>
を指定します。

<h3 class="sample1">
dottedの枠線を指定します。
</h3>

<h4 class="sample2">
上にoutset・右にdouble・下にdashed・左のsolidの枠線を指定します。
</h4>

[ブラウザ上]


みどりの枠線を指定します。

dottedの枠線を指定します。

上にoutset・右にdouble・下にdashed・左にsolidの枠線を指定します。


Copyright c 2007.10.01 luc All rights reserved.