box-shadow-radius-000.html (3643B)
1 <!DOCTYPE html> 2 <title>Box Shadow Border Radius (Outset)</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape"> 5 <link rel="match" href="box-shadow-radius-000-ref.html"> 6 <!-- Allow differences of antialised pixels along rounded edges --> 7 <meta name="fuzzy" content="0-25;0-90"> 8 9 <style> 10 body > div { 11 /* Isolate tests from each other */ 12 position: relative; 13 width: 100px; 14 height: 100px; 15 float: left; 16 } 17 div > div { 18 position: absolute; 19 box-sizing: border-box; 20 /* opacity: 0.7; /* uncomment this line for debugging */ 21 } 22 23 .floor > .test { 24 color: silver; 25 } 26 .trap > .test { 27 color: red; 28 } 29 30 .floor > .ref { 31 border: solid red; 32 width: 58px; 33 height: 58px; 34 top: 21px; 35 left: 21px; 36 } 37 .trap > .ref { 38 border: solid silver; 39 width: 62px; 40 height: 62px; 41 top: 19px; 42 left: 19px; 43 } 44 45 /* Keep tests centered by (top|left)*2 + (width|height) = 100. 46 Keep tests consistent spread + (width|height) = 60 47 Floor = spread - 2px 48 Trap = spread + 2px */ 49 50 .once > .test { 51 border-radius: 10px; 52 box-shadow: 0 0 0 10px; 53 /* shadow radius = 20px */ 54 top: 30px; left: 30px; 55 width: 40px; height: 40px; 56 } 57 .once > .ref { 58 border-radius: 20px; 59 } 60 .once.floor > .ref { 61 border-width: 8px; 62 } 63 .once.trap > .ref { 64 border-width: 12px; 65 } 66 67 .twice > .test { 68 border-radius: 10px; 69 box-shadow: 0 0 0 5px; 70 /* shadow radius = 15px */ 71 top: 25px; left: 25px; 72 width: 50px; height: 50px; 73 } 74 .twice > .ref { 75 border-radius: 15px; 76 } 77 .twice.floor > .ref { 78 border-width: 3px; 79 } 80 .twice.trap > .ref { 81 border-width: 7px; 82 } 83 84 .half > .test { 85 border-radius: 8px; 86 box-shadow: 0 0 0 16px; 87 /* shadow radius = 22px */ 88 top: 36px; left: 36px; 89 width: 28px; height: 28px; 90 } 91 .half > .ref { 92 border-radius: 22px; 93 } 94 .half.floor > .ref { 95 border-width: 14px; 96 } 97 .half.trap > .ref { 98 border-width: 20px; 99 } 100 101 .fourth > .test { 102 border-radius: 5px; 103 box-shadow: 0 0 0 20px; 104 /* shadow radius = 16.56px */ 105 top: 40px; left: 40px; 106 width: 20px; height: 20px; 107 } 108 .fourth > .ref { 109 border-radius: 17px; 110 } 111 .fourth.floor > .ref { 112 border-width: 18px; 113 } 114 .fourth.trap > .ref { 115 border-width: 23px; 116 } 117 118 .eighth > .test { 119 border-radius: 2px; 120 box-shadow: 0 0 0 16px; 121 /* shadow radius = 7.28 */ 122 top: 36px; left: 36px; 123 width: 28px; height: 28px; 124 } 125 .eighth > .ref { 126 border-radius: 7.28px; 127 } 128 .eighth.floor > .ref { 129 border-width: 14px; 130 } 131 .eighth.trap > .ref { 132 border-width: 18px; 133 } 134 135 136 </style> 137 138 <p>Test passes if there is no red. 139 140 <div class="once floor"> 141 <div class="ref"></div> 142 <div class="test"></div> 143 </div> 144 <div class="once trap"> 145 <div class="test"></div> 146 <div class="ref"></div> 147 </div> 148 149 <div class="twice floor"> 150 <div class="ref"></div> 151 <div class="test"></div> 152 </div> 153 <div class="twice trap"> 154 <div class="test"></div> 155 <div class="ref"></div> 156 </div> 157 158 <div class="half floor"> 159 <div class="ref"></div> 160 <div class="test"></div> 161 </div> 162 <div class="half trap"> 163 <div class="test"></div> 164 <div class="ref"></div> 165 </div> 166 167 <div class="fourth floor"> 168 <div class="ref"></div> 169 <div class="test"></div> 170 </div> 171 <div class="fourth trap"> 172 <div class="test"></div> 173 <div class="ref"></div> 174 </div> 175 176 <div class="eighth floor"> 177 <div class="ref"></div> 178 <div class="test"></div> 179 </div> 180 <div class="eighth trap"> 181 <div class="test"></div> 182 <div class="ref"></div> 183 </div>