gradients-with-border-ref.html (1024B)
1 <!doctype html> 2 <style> 3 .test { 4 width: 200px; 5 height: 100px; 6 margin-left: 90px; 7 border: solid 10px blue; 8 } 9 10 .spacer { 11 float: left; 12 width: 90px; 13 height: 120px; 14 background-color: blue; 15 } 16 17 .outer { 18 width: 200px; 19 height: 100px; 20 margin-left: 90px; 21 padding: 10px; 22 background-color: blue; 23 } 24 25 #gradient1 { 26 width: 200px; 27 height: 100px; 28 background-image: linear-gradient(to right top, black 49%, white 50%); 29 } 30 31 #gradient2 { 32 background-image: linear-gradient(to right top, black 49%, white 50%); 33 } 34 35 #gradient3 { 36 background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%); 37 } 38 </style> 39 40 <div> 41 <div class="spacer"></div> 42 <div class="outer"> 43 <div id="gradient1"></div> 44 </div> 45 </div> 46 <div id="gradient2" class="test"></div> 47 <div> 48 <div class="spacer"></div> 49 <div id="gradient3" class="test"></div> 50 </div>