CSS ボーダーブロックスタイル属性
定義と用法
関連するCSS属性 属性は要素のブロック方向の境界線スタイルを設定します。
関連するCSS属性 属性の値はさまざまな方法で設定できます：
もし 関連するCSS属性 属性には2つの値があります：
border-block-style: solid;
- ブロックの開始の境界線スタイルが点線です
- ブロックの終了の境界線スタイルが点線です
もし 関連するCSS属性 属性には1つの値があります：
border-block-style: dashed;
- ブロックの開始と終了の境界線スタイルが点線です
CSS 関連するCSS属性 属性と CSS 属性 border-bottom-style、border-left-style、border-right-style および border-top-style 非常相似，但 関連するCSS属性 属性依赖于块方向。
非常に似ていますが、属性はブロック方向に依存します。 例2：writing-mode属性と組み合わせた場合 注意： 関連するCSS属性 ブロック方向を定義します。これにより、ブロックの始まりと終わり位置、および
border-block-style
属性の結果。英語ページでは、インライン方向は左から右、ブロック方向は下に向かいます。
インスタンス
例1
ブロック方向のエッジスタイルを設定します：
writing-mode: vertical-rl;
#example1 {
border-block-style: solid;
writing-mode: vertical-rl;
#example2 {
border-block-style: dashed dotted; 例2：writing-mode属性と組み合わせた場合 ブロック方向の始まりと終わりにエッジスタイルの位置は、
writing-mode
属性の影響：
div {
writing-mode: vertical-rl;
}
自分で試してみてください
CSS 文法
| border-block-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; | 属性値 |
|---|---|
| none | 値 |
| 説明 | デフォルト値。エッジを指定しません。 |
| hidden | noneと同じですが、テーブル要素のエッジの衝突解決時を除きます。 |
| dashed | ダッシュラインエッジを指定します。 |
| solid | ソリッドラインエッジを指定します。 |
| double | ダブルラインエッジを指定します。 |
| groove |
3D グローヴエッジを指定します。 効果は border-color の値によって決まります。 |
| ridge |
3D リーズエッジを指定します。 効果は border-color の値によって決まります。 |
| inset |
3D インセットエッジを指定します。 効果は border-color の値によって決まります。 |
| outset |
3D アウトセットエッジを指定します。 効果は border-color の値によって決まります。 |
| initial | この属性をデフォルト値に設定します。参照してください initial。 |
| inherit | 親要素からこの属性を継承します。参照してください inherit。 |
技術的詳細
| デフォルト値： | none |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポートしていません。参照してください：アニメーション関連属性。 |
| バージョン： | CSS3 |
| JavaScript 文法： | object.style.borderBlockStyle="dotted" |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| クローム | エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
関連ページ
チュートリアル：CSS 边框
参考：CSS ボーダー属性
