<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>