1616444-same-color-different-paths.html (3331B)
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 .header { 11 border: 1px solid black; 12 font-size: 10px; 13 font-weight: bold; 14 } 15 br { clear: both; } 16 .layer { will-change: transform } 17 18 .add-border { border-left: 1px solid transparent; } 19 .red { background: red } 20 .g-red { background: linear-gradient(red,red) } 21 .orange { background: orange } 22 .g-orange { background: linear-gradient(orange,orange) } 23 .yellow { background: yellow } 24 .g-yellow { background: linear-gradient(yellow,yellow) } 25 .green { background: green } 26 .g-green { background: linear-gradient(green,green) } 27 .blue { background: blue } 28 .g-blue { background: linear-gradient(blue,blue) } 29 .indigo { background: indigo } 30 .g-indigo { background: linear-gradient(indigo,indigo) } 31 .violet { background: violet } 32 .g-violet { background: linear-gradient(violet,violet) } 33 34 </style> 35 </head><body> 36 <div class="swatch header">A: named color</div> 37 <div class="swatch header">B: �& will-change: transform</div> 38 <div class="swatch header">C: �& border</div> 39 <div class="swatch header">D: solid-color gradient </div> 40 <div class="swatch header">E: �& will-change: transform</div> 41 <div class="swatch header">F: �& border</div> 42 <br> 43 <div class="swatch red"></div> 44 <div class="swatch red layer"></div> 45 <div class="swatch red layer add-border"></div> 46 <div class="swatch g-red"></div> 47 <div class="swatch g-red layer"></div> 48 <div class="swatch g-red layer add-border"></div> 49 <br> 50 <div class="swatch orange"></div> 51 <div class="swatch orange layer"></div> 52 <div class="swatch orange layer add-border"></div> 53 <div class="swatch g-orange"></div> 54 <div class="swatch g-orange layer"></div> 55 <div class="swatch g-orange layer add-border"></div> 56 <br> 57 <div class="swatch yellow"></div> 58 <div class="swatch yellow layer"></div> 59 <div class="swatch yellow layer add-border"></div> 60 <div class="swatch g-yellow"></div> 61 <div class="swatch g-yellow layer"></div> 62 <div class="swatch g-yellow layer add-border"></div> 63 <br> 64 <div class="swatch green"></div> 65 <div class="swatch green layer"></div> 66 <div class="swatch green layer add-border"></div> 67 <div class="swatch g-green"></div> 68 <div class="swatch g-green layer"></div> 69 <div class="swatch g-green layer add-border"></div> 70 <br> 71 <div class="swatch blue"></div> 72 <div class="swatch blue layer"></div> 73 <div class="swatch blue layer add-border"></div> 74 <div class="swatch g-blue"></div> 75 <div class="swatch g-blue layer"></div> 76 <div class="swatch g-blue layer add-border"></div> 77 <br> 78 <div class="swatch indigo"></div> 79 <div class="swatch indigo layer"></div> 80 <div class="swatch indigo layer add-border"></div> 81 <div class="swatch g-indigo"></div> 82 <div class="swatch g-indigo layer"></div> 83 <div class="swatch g-indigo layer add-border"></div> 84 <br> 85 <div class="swatch violet"></div> 86 <div class="swatch violet layer"></div> 87 <div class="swatch violet layer add-border"></div> 88 <div class="swatch g-violet"></div> 89 <div class="swatch g-violet layer"></div> 90 <div class="swatch g-violet layer add-border"></div> 91 <br> 92 </body></html>