| <!DOCTYPE html> |
| <style> |
| .outer { |
| width: 40px; |
| height: 40px; |
| display: flex; |
| box-sizing: border-box; |
| } |
| .outer div { |
| flex: 1; |
| } |
| .shadow { |
| box-shadow: inset 0 0 0 5px blue; |
| } |
| .border { |
| border: 10px solid transparent; |
| } |
| .radius { |
| border-radius: 20px; |
| } |
| </style> |
| <div class="outer shadow"></div> |
| <div class="outer shadow"></div> |
| <div class="outer shadow"></div> |
| <div class="outer" style="padding: 10px"><div class="shadow"></div></div> |
| <div class="outer" style="padding: 10px"><div class="shadow radius"></div></div> |
| <div class="shadow radius" style="width: 20px; height: 20px"></div> |
| <div class="shadow radius" style="width: 20px; height: 20px"></div> |
| <div class="outer" style="padding: 10px"><div class="shadow radius"></div></div> |
