box-shadow-radius-001.html (3326B)
1 <!DOCTYPE html> 2 <title>Box Shadow Border Radius (Inset)</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-001-ref.html"> 6 7 <style> 8 body > div { 9 /* Isolate tests from each other */ 10 position: relative; 11 width: 100px; 12 height: 100px; 13 float: left; 14 } 15 div > div { 16 position: absolute; 17 box-sizing: border-box; 18 /* opacity: 0.7; /* uncomment this line for debugging */ 19 } 20 21 .floor > .test { 22 color: silver; 23 } 24 .trap > .test { 25 color: red; 26 } 27 .test { 28 width: 60px; 29 height: 60px; 30 top: 20px; 31 left: 20px; 32 } 33 34 .floor > .ref { 35 border: 8px red; 36 border-style: solid none none solid; 37 top: 21px; 38 left: 21px; 39 width: 59px; 40 height: 59px; 41 } 42 .trap > .ref { 43 border: 31px silver; 44 border-style: solid none none solid; 45 width: 81px; 46 height: 81px; 47 } 48 49 /* Keep tests consistent by offset - spread = 10 50 Trap radius = 32px + shadow radius (round up) 51 Floor radius = 8px + shadow radius (round down) */ 52 53 .once > .test { 54 border-top-left-radius: 10px; 55 box-shadow: 20px 20px 0 -10px inset; 56 /* shadow radius = 20px */ 57 } 58 .once.floor > .ref { 59 border-top-left-radius: 28px; 60 } 61 .once.trap > .ref { 62 border-top-left-radius: 52px; 63 } 64 65 .twice > .test { 66 border-top-left-radius: 10px; 67 box-shadow: 15px 15px 0 -5px inset; 68 /* shadow radius = 15 */ 69 } 70 .twice.floor > .ref { 71 border-top-left-radius: 23px; 72 } 73 .twice.trap > .ref { 74 border-top-left-radius: 47px; 75 } 76 77 .half > .test { 78 border-top-left-radius: 8px; 79 box-shadow: 26px 26px 0 -16px inset; 80 /* shadow radius = 21px */ 81 } 82 .half.floor > .ref { 83 border-top-left-radius: 29px; 84 } 85 .half.trap > .ref { 86 border-top-left-radius: 53px; 87 } 88 89 .fourth > .test { 90 border-top-left-radius: 5px; 91 box-shadow: 30px 30px 0 -20px inset; 92 /* shadow radius = 14.45 */ 93 } 94 .fourth.floor > .ref { 95 border-top-left-radius: 22px; 96 } 97 .fourth.trap > .ref { 98 border-top-left-radius: 47px; 99 } 100 101 .eighth > .test { 102 border-top-left-radius: 2px; 103 box-shadow: 26px 26px 0 -16px inset; 104 /* shadow radius = 5.28 */ 105 } 106 .eighth.floor > .ref { 107 border-top-left-radius: 12px; 108 } 109 .eighth.trap > .ref { 110 border-top-left-radius: 38px; 111 } 112 113 </style> 114 115 <p>Test passes if there is no red. 116 117 <div class="once floor"> 118 <div class="ref"></div> 119 <div class="test"></div> 120 </div> 121 <div class="once trap"> 122 <div class="test"></div> 123 <div class="ref"></div> 124 </div> 125 126 <div class="twice floor"> 127 <div class="ref"></div> 128 <div class="test"></div> 129 </div> 130 <div class="twice trap"> 131 <div class="test"></div> 132 <div class="ref"></div> 133 </div> 134 135 <div class="half floor"> 136 <div class="ref"></div> 137 <div class="test"></div> 138 </div> 139 <div class="half trap"> 140 <div class="test"></div> 141 <div class="ref"></div> 142 </div> 143 144 <div class="fourth floor"> 145 <div class="ref"></div> 146 <div class="test"></div> 147 </div> 148 <div class="fourth trap"> 149 <div class="test"></div> 150 <div class="ref"></div> 151 </div> 152 153 <div class="eighth floor"> 154 <div class="ref"></div> 155 <div class="test"></div> 156 </div> 157 <div class="eighth trap"> 158 <div class="test"></div> 159 <div class="ref"></div> 160 </div>