box-shadow-radius-generated.html (2010B)
1 <!DOCTYPE html> 2 <title>Box Shadow Border Radius (Outset)</title> 3 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape"> 4 <link rel="match" href="box-shadow-radius-generated-ref.html"> 5 <!-- Allow differences of antialised pixels along rounded edges --> 6 <meta name="fuzzy" content="0-32;0-128"> 7 <meta name="variant" content="?width=50&height=50&spread=50&radius=0px"> 8 <meta name="variant" content="?width=50&height=50&spread=50&radius=1px"> 9 <meta name="variant" content="?width=10&height=10&spread=70&radius=100%"> 10 <meta name="variant" content="?width=200&height=40&spread=50&radius=100px%20/%2020px"> 11 <meta name="variant" content="?width=200&height=40&spread=50&radius=20px%20/%204px"> 12 <meta name="variant" content="?width=300&height=50&spread=30&radius=15px"> 13 <meta name="variant" content="?width=300&height=50&spread=30&radius=25px"> 14 <meta name="variant" content="?width=300&height=60&spread=30&radius=20px%2020px%2040px%2040px"> 15 <meta name="variant" content="?width=300&height=50&spread=30&radius=1px%201px%2049px%2049px"> 16 <meta name="variant" content="?width=300&height=60&spread=30&radius=0px%200px%2030px%2030px"> 17 <meta name="variant" content="?width=300&height=50&spread=30&radius=50%"> 18 <meta name="variant" content="?width=300&height=50&spread=30&radius=50%%2050%%201px%2050%"> 19 <meta name="variant" content="?width=200&height=40&spread=50&radius=10%%2090%%205%%"> 20 <meta name="variant" content="?width=200&height=40&spread=50&radius=0%2050%%2050%"> 21 <meta name="variant" content="?width=250&height=30&spread=100&radius=10px"> 22 <style> 23 #target { 24 position: absolute; 25 top: 100px; 26 left: 100px; 27 width: calc(var(--width) * 1px); 28 height: calc(var(--height) * 1px); 29 border-radius: var(--radius); 30 box-shadow: 0 0 0 calc(var(--spread) * 1px) black; 31 background: green; 32 } 33 </style> 34 35 <script> 36 for (const param of new URL(location.href).searchParams) 37 document.documentElement.style.setProperty(`--${param[0]}`, param[1]); 38 </script> 39 40 <div id="target"></div>