41 lines
1.7 KiB
HTML
41 lines
1.7 KiB
HTML
<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) 15px 15px inset;"></div>
|
|
<div class="square" style="-webkit-box-shadow: -15px 15px 0 5px rgba(0, 0, 0, 0.2) inset;"></div>
|
|
<div class="square" style="-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 15px -15px 0 -10px;"></div>
|
|
<div class="square" style="-webkit-box-shadow: inset -15px -15px 5px rgba(0, 0, 0, 0.2);"></div>
|
|
<div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) inset -15px -15px 5px;"></div>
|
|
</div>
|
|
<div class="rounded">
|
|
<div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px inset;"></div>
|
|
<div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px 15px 0 5px inset;"></div>
|
|
<div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px -15px 0 -10px inset;"></div>
|
|
<div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15px 5px inset;"></div>
|
|
<div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15px 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>
|