| <head> |
| <style> |
| table { border-spacing: 10px; } |
| td { border:1px solid black; padding: 10px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) } |
| .shadowfirstline::first-line { -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); background-color: #eeeeee; } |
| .shadowfirstletter::first-letter { -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); background-color: #eeeeee; border:1px solid black; font-size:48px; float:left; padding:4px; margin-right:4px } |
| </style> |
| |
| <span style="line-height:50px; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px 5px red; border:5px solid black"> |
| This text<br> should have<br> a multi-line shadow with a border-radius. |
| </span> |
| |
| <div style="width:100px;height:100px; border:10px solid black; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)">50% transparent black shadow</div> |
| |
| <table> |
| <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr> |
| <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr> |
| <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr> |
| <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr> |
| <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr> |
| </table> |
| |
| <p class="shadowfirstline"> |
| The first line of this div should have a box-shadow on it.<br> |
| This second line should not. |
| </p> |
| |
| <p class="shadowfirstletter"> |
| The first letter of this paragraph should have a border and a nice shadow effect.<br> |
| It should look pretty cool. |
| </p> |
| |
