| body { |
| margin: 0; |
| } |
| |
| div { |
| -webkit-logical-width: 200px; |
| -webkit-logical-height: 150px; |
| -webkit-column-gap: 30px; |
| -webkit-column-rule-width: 10px; |
| -webkit-column-rule-style: solid; |
| outline: 1px dashed lightblue; |
| -webkit-margin-after: 360px; |
| -webkit-border-before: 20px solid silver; |
| -webkit-margin-start: 20px; |
| } |
| |
| div.horizontal |
| { |
| -webkit-column-axis: vertical; |
| } |
| |
| div.horizontal.flipped |
| { |
| -webkit-writing-mode: horizontal-bt; |
| } |
| |
| div.vertical |
| { |
| -webkit-writing-mode: vertical-lr; |
| -webkit-column-axis: horizontal; |
| } |
| |
| div.vertical.flipped |
| { |
| -webkit-writing-mode: vertical-rl; |
| } |
| |
| span { |
| background-color: yellow; |
| position: relative; |
| } |
