| <style> |
| div.square { |
| width: 80px; |
| height: 80px; |
| margin: 10px; |
| display: inline-block; |
| background: lightyellow; |
| border: 10px solid green; |
| } |
| .rounded div.square { |
| -webkit-border-radius: 20px; |
| } |
| </style> |
| <div> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15.5px 15.5px inset;"></div> |
| <div class="square" style="-webkit-box-shadow: -15px 15px 0 5.5px rgba(0, 0, 0, 0.2) inset;"></div> |
| <div class="square" style="-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 15.5px -15.5px 0 -10px;"></div> |
| <div class="square" style="-webkit-box-shadow: inset -15.5px -15.5px 5.5px rgba(0, 0, 0, 0.2);"></div> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) inset -15.5px -15.5px 5.5px;"></div> |
| </div> |
| <div class="rounded"> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15.5px 15.5px inset;"></div> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px 15px 0 5.5px inset;"></div> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15.5px -15.5px 0 -10px inset;"></div> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15.5px -15.5px 5.5px inset;"></div> |
| <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15.5px -15.5px inset, rgba(0, 0, 127, 0.6) 5px 5px 5px inset; border-style: dashed;"></div> |
| </div> |
| <div style="width: 600px; text-align: center;"> |
| <span style=" |
| padding: 0 15px; |
| font-size: 72px; |
| background-color: lightyellow; |
| -webkit-border-radius: 10px; |
| border: 5px solid green; |
| line-height: 1.5; |
| -webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.2) inset; |
| "> |
| This sentence is too long to fit on a single line. |
| </span> |
| </div> |
