multicol-gap-decorations-008.html (1435B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Multicolumn gap decorations painted with 0px outset and rule-break intersection. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="multicol-gap-decorations-008-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 body { 10 margin: 0px; 11 } 12 13 .container { 14 border: 2px solid rgb(96 139 168); 15 width: 200px; 16 height: 200px; 17 column-height: 60px; 18 column-gap: 10px; 19 row-gap: 10px; 20 column-rule-width: 10px; 21 column-rule-style: solid; 22 column-rule-color: blue; 23 row-rule-width: 10px; 24 row-rule-style: solid; 25 row-rule-color: gold; 26 row-rule-break: intersection; 27 column-rule-break: intersection; 28 column-rule-inset: 0px; 29 row-rule-inset: 0px; 30 column-wrap: wrap; 31 column-width: 60px; 32 column-count: 3; 33 column-fill: auto; 34 } 35 36 p { 37 background: rgb(96 139 168 / 0.2); 38 height: 60px; 39 margin: 0px; 40 } 41 42 h2 { 43 column-span: all; 44 background-color: cyan; 45 color: #fff; 46 margin: 0px; 47 opacity: 0.5; 48 height: 18px; 49 } 50 </style> 51 52 <div class="container"> 53 <p></p> 54 <p></p> 55 <h2></h2> 56 57 <p></p> 58 <p></p> 59 <p></p> 60 <p></p> 61 <p></p> 62 <p></p> 63 </div>