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