1616444-same-color-different-paths-ref.html (1364B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta http-equiv="content-type" content="text/html; charset=windows-1252"><style> 4 .swatch { 5 float: left; 6 height: 40px; 7 width: 120px; 8 box-sizing: border-box; 9 } 10 .swatch2 { 11 float: left; 12 height: 40px; 13 width: 720px; 14 box-sizing: border-box; 15 } 16 .header { 17 border: 1px solid black; 18 font-size: 10px; 19 font-weight: bold; 20 } 21 br { clear: both; } 22 23 .red { background: red } 24 .orange { background: orange } 25 .yellow { background: yellow } 26 .green { background: green } 27 .blue { background: blue } 28 .indigo { background: indigo } 29 .violet { background: violet } 30 31 </style> 32 </head><body> 33 <div class="swatch header">A: named color</div> 34 <div class="swatch header">B: �& will-change: transform</div> 35 <div class="swatch header">C: �& border</div> 36 <div class="swatch header">D: solid-color gradient </div> 37 <div class="swatch header">E: �& will-change: transform</div> 38 <div class="swatch header">F: �& border</div> 39 <br> 40 <div class="swatch2 red"></div> 41 <br> 42 <div class="swatch2 orange"></div> 43 <br> 44 <div class="swatch2 yellow"></div> 45 <br> 46 <div class="swatch2 green"></div> 47 <br> 48 <div class="swatch2 blue"></div> 49 <br> 50 <div class="swatch2 indigo"></div> 51 <br> 52 <div class="swatch2 violet"></div> 53 <br> 54 </body></html>