|
|
none
solid
double
dotted
dashed
groove
ridge
inset
outset |
 |
▼CSSソース
p {
margin: 1.5em;
padding: 0.4em;
border: 3px #FF9900;
text-align: center
}
.none {border-style: none;}
.solid {border-style: solid;}
.double {border-style: double;}
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
※em：適用先のフォントサイズ（font-sizeプロパティの値）を１とする相対的な単位です。
▼HTMLソース（上から順）
<p class="none">none</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
|
|
|
| ・solid |
：実線で表示します。 |
| ・double |
：二重線で表示します。 |
| ・dotted |
：点線で表示します。 |
| ・dashed |
：波線で表示します。 |
| ・groove |
：ボーダー部分がへこんで見えるように表示します。 |
| ・ridge |
：ボーダー部分が飛び出て見えるように表示します。 |
| ・inset |
：ボーダーに囲まれた範囲全体がへこんで見えるように表示します。 |
| ・outset |
：ボーダーに囲まれた範囲全体が飛び出てみえるように表示します。 |
|
|
▼Windows版、Maicntosh版Netscape Navigator4.xは、dottedとdashedには対応していません。（solidと同様に表示されます）Internet Explorer5.5以上、Netscape Navigator6以上では問題なく表示されました。
▼いろいろ試してみたのですが、Netscape Navigator4.xでは思ったような表示結果が得られませんでした。
▼テキストのサイズや行間を指定し、読みやすいページ作りができたり、サイトの模様替えが簡単にできたりと、とても便利なスタイルシートですが、「環境による見え方の差」を知らなければと思いました。
|
