| OLD | NEW |
| 1 <style> | 1 <style> |
| 2 div.square { | 2 div.square { |
| 3 width: 80px; | 3 width: 80px; |
| 4 height: 80px; | 4 height: 80px; |
| 5 margin: 10px; | 5 margin: 10px; |
| 6 display: inline-block; | 6 display: inline-block; |
| 7 background: lightyellow; | 7 background: lightyellow; |
| 8 border: 10px solid green; | 8 border: 10px solid green; |
| 9 } | 9 } |
| 10 .rounded div.square { | 10 .rounded div.square { |
| 11 -webkit-border-radius: 20px; | 11 -webkit-border-radius: 20px; |
| 12 } | 12 } |
| 13 </style> | 13 </style> |
| 14 <div> | 14 <div> |
| 15 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px
inset;"></div> | 15 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15.5px 15.
5px inset;"></div> |
| 16 <div class="square" style="-webkit-box-shadow: -15px 15px 0 5px rgba(0, 0, 0
, 0.2) inset;"></div> | 16 <div class="square" style="-webkit-box-shadow: -15px 15px 0 5.5px rgba(0, 0,
0, 0.2) inset;"></div> |
| 17 <div class="square" style="-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 15px
-15px 0 -10px;"></div> | 17 <div class="square" style="-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 15.5
px -15.5px 0 -10px;"></div> |
| 18 <div class="square" style="-webkit-box-shadow: inset -15px -15px 5px rgba(0,
0, 0, 0.2);"></div> | 18 <div class="square" style="-webkit-box-shadow: inset -15.5px -15.5px 5.5px r
gba(0, 0, 0, 0.2);"></div> |
| 19 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) inset -15p
x -15px 5px;"></div> | 19 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) inset -15.
5px -15.5px 5.5px;"></div> |
| 20 </div> | 20 </div> |
| 21 <div class="rounded"> | 21 <div class="rounded"> |
| 22 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px
inset;"></div> | 22 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15.5px 15.
5px inset;"></div> |
| 23 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px 15px
0 5px inset;"></div> | 23 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px 15px
0 5.5px inset;"></div> |
| 24 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px -15px
0 -10px inset;"></div> | 24 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15.5px -15
.5px 0 -10px inset;"></div> |
| 25 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15p
x 5px inset;"></div> | 25 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15.5px -1
5.5px 5.5px inset;"></div> |
| 26 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15p
x inset, rgba(0, 0, 127, 0.6) 5px 5px 5px inset; border-style: dashed;"></div> | 26 <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15.5px -1
5.5px inset, rgba(0, 0, 127, 0.6) 5px 5px 5px inset; border-style: dashed;"></di
v> |
| 27 </div> | 27 </div> |
| 28 <div style="width: 600px; text-align: center;"> | 28 <div style="width: 600px; text-align: center;"> |
| 29 <span style=" | 29 <span style=" |
| 30 padding: 0 15px; | 30 padding: 0 15px; |
| 31 font-size: 72px; | 31 font-size: 72px; |
| 32 background-color: lightyellow; | 32 background-color: lightyellow; |
| 33 -webkit-border-radius: 10px; | 33 -webkit-border-radius: 10px; |
| 34 border: 5px solid green; | 34 border: 5px solid green; |
| 35 line-height: 1.5; | 35 line-height: 1.5; |
| 36 -webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.2) inset; | 36 -webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.2) inset; |
| 37 "> | 37 "> |
| 38 This sentence is too long to fit on a single line. | 38 This sentence is too long to fit on a single line. |
| 39 </span> | 39 </span> |
| 40 </div> | 40 </div> |
| OLD | NEW |