611574-2.html (4569B)
1 <!DOCTYPE HTML> 2 <html> 3 <head><style> 4 button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; } 5 button { border: none; outline: 3px solid black; outline-offset: -2px; } 6 </style></head> 7 <body style="margin:30px"> 8 <div style="column-count:3; column-fill:auto; height:600px"> 9 <p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button> 10 <p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button> 11 <p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button> 12 <p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button> 13 <p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button> 14 15 <p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button> 16 <p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button> 17 <p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button> 18 <p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button> 19 <p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button> 20 21 <!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference 22 <p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span> 23 <p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span> 24 <p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span> 25 <p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span> 26 <p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span> 27 28 <p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span> 29 <p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span> 30 <p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span> 31 <p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span> 32 <p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span> 33 --> 34 35 <p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> 36 <p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> 37 <p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> 38 <p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> 39 <p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> 40 <p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> 41 42 <p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> 43 <p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> 44 <p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> 45 <p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> 46 <p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> 47 <p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> 48 49 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> 50 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> 51 <p><fieldset style="display:inline;box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> 52 <p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> 53 <p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> 54 <p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> 55 56 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> 57 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> 58 <p><fieldset style="display:inline;box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> 59 <p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> 60 <p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> 61 <p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> 62 63 </div> 64 65 66 </body> 67 </html>