33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
<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>
|
|
|