<!DOCTYPE HTML >
<html >
<head ><style >
button ,span ,fieldset { border-radius: 7px 3px; background-color: #0F0; }
button { border: none; outline: 3px solid black; outline-offset: -2px; }
</style ></head >
<body style ="margin:30px" >
<div style ="column-count:3; column-fill:auto; height:600px" >
<p><button style ="box-shadow: inset -20px 10px 0 #0F0;" >No Blur Radius</button >
<p><button style ="box-shadow: inset 20px 10px 0 #0F0;" >No Blur Radius</button >
<p><button style ="box-shadow: inset -20px 10px 0 4px #0F0;" >No Blur Radius</button >
<p><button style ="box-shadow: inset 200px 100px 0 4px #0F0;" >No Blur Radius</button >
<p><button style ="box-shadow: inset 200px -100px 0 4px #0F0;" >No Blur Radius</button >
<p><button style ="box-shadow: inset -20px 10px 2px #0F0;" >2px Blur Radius</button >
<p><button style ="box-shadow: inset 20px 10px 2px #0F0;" >2px Blur Radius</button >
<p><button style ="box-shadow: inset -20px 10px 2px 4px #0F0;" >2px Blur Radius</button >
<p><button style ="box-shadow: inset 200px 100px 2px 4px #0F0;" >2px Blur Radius</button >
<p><button style ="box-shadow: inset 200px -100px 2px 4px #0F0;" >2px Blur Radius</button >
<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference
<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span>
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span>
<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
-->
<p><fieldset style ="box-shadow: inset -20px 10px 0 #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset -20px 10px 0 #0F0;" ><legend >No</legend > Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset 20px 10px 0 #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset 200px 100px 0 4px #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset 200px -100px 0 4px #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset -20px 10px 2px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset -20px 10px 2px #0F0;" ><legend >2px</legend > Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset 20px 10px 2px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset 200px 100px 2px 4px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="box-shadow: inset 200px -100px 2px 4px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset -20px 10px 0 #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset -20px 10px 0 #0F0;" ><legend >No</legend > Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset 20px 10px 0 #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;" >No Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset -20px 10px 2px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset -20px 10px 2px #0F0;" ><legend >2px</legend > Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset 20px 10px 2px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;" >2px Blur Radius</fieldset >
<p><fieldset style ="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;" >2px Blur Radius</fieldset >
</div >
</body >
</html >
Messung V0.5 C=83 H=100 G=91
¤ Dauer der Verarbeitung: 0.3 Sekunden
¤
*© Formatika GbR, Deutschland