English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-bottom-style CSS属性は、単独で要素の下枠のスタイルを設定するために使用されます。しかし、実際の作業では、通常border-styleまたはborder-bottomこれを使って枠のスタイルを定義します。
以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの使用構文を示しています。
| デフォルト値： | none |
|---|---|
| 適用範囲： | すべての要素 |
| 継承： | ありません |
| アニメーション可能： | いいえ。参照してください。 アニメーション属性。 |
| バージョン： | CSS 1、2、3 |
| JavaScriptの構文： | object object.style.borderBottomStyle="dashed" |
この属性の構文は以下の通りです：
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
以下の例では、borderの使用方法を示します。-bottom-style属性。
p {
border-bottom-style: dashed;
border-bottom-width: 3px;
}テストをしてみる‹/›以下のテーブルはこの属性の値を説明しています。
| 値 | 説明 |
|---|---|
none | 枠線なしに表示します。 |
| hidden | noneと同じですが、テーブルセルには折りたたみ枠線そして2つのセルが共有する枠線があります。このhidden値は、他のすべての枠線スタイルよりも優先して枠線を描画しないことを確保します。 |
| dotted | 枠線を点のシリーズに表示します。 |
| dashed | 枠線を短い線のシリーズ、つまり破線に表示します。 |
| solid | 枠線を1本の実線に表示します。 |
| double | 枠線を2本の平行的な実線に表示し、その間に一定の間隔を置きます。2本の線の合計およびその間の間隔は、border-widthの値。 |
| groove | 表示して、キャンバスに彫り込まれたように見えます。それは3Dの印象、これは通常、枠線の色よりもborder-colorより浅くて暗い色の影を作成して実現します。 |
| ridge | 効果とは反対の枠線grooveを表示します。また、3Dの印象、枠線がキャンバスから出てくるように見えます。 |
| inset | 表示して、要素の枠線がキャンバスに埋め込まれているように見えます。それは3D、これは通常、影の2色を作成して、枠線の色よりもborder-color少し明るくて濃い色の影を与えます。 |
| outset | 効果とは反対の枠線insetを表示します。また、3Dの印象、枠線がキャンバスから出てくるように見えます。 |
| initial | この属性をデフォルト値に設定します。 |
| inherit | 指定された場合、関連する要素は親要素のborderを使用します。-bottom-style属性の計算値。 |
border-bottom-style属性のブラウザの互換性について、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョン番号を示しています。すべての主要ブラウザがこの属性をサポートしています。
|
警告： Internet Explorer 7およびそれ以前のバージョンではvalue hiddenをサポートしていません。IE8サポートしていますが、。IE9及びそれ以降のバージョンがこのhidden値をサポートしています。
参照教材：CSS Border、CSS3 Border。
関連属性：border、border-style、border-bottom、border-bottom-color、
border-bottom-width。