81 lines
2.0 KiB
HTML
81 lines
2.0 KiB
HTML
<style>
|
|
body {
|
|
-webkit-writing-mode: vertical-lr;
|
|
-webkit-text-orientation: mixed;
|
|
}
|
|
div > div {
|
|
display: inline-block;
|
|
}
|
|
span {
|
|
-webkit-padding-start: 15px; -webkit-padding-end:15px;
|
|
font-size: 48pt;
|
|
background-color: #DDD;
|
|
line-height: 2em;
|
|
border-width: 20px;
|
|
border-color: gray;
|
|
}
|
|
|
|
.sharp, .rounded {
|
|
margin: 20px;
|
|
}
|
|
.rounded span {
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="sharp">
|
|
<div>
|
|
<span style="border-style: solid;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: groove;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: ridge;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: outset;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: inset;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: double;">
|
|
<br> </span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded">
|
|
<div>
|
|
<span style="border-style: solid;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: groove;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: ridge;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: outset;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: inset;">
|
|
<br> </span>
|
|
</div>
|
|
<div>
|
|
<span style="border-style: double;">
|
|
<br> </span>
|
|
</div>
|
|
</div>
|
|
</div>
|