Rounded rectangle HTML + CSS implementation code

Time:2022-1-2

Having nothing to do, I suddenly remembered the implementation of rounded rectangle. But this topic has been talked about for too long. Various implementation schemes can be seen on the Internet. Here is just a record of what I think is better. This scheme does not use any pictures and is implemented in pure HTML + CSS.
CSS code==================================

Copy code

The code is as follows:

<style type=”text/css“>
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
font-size:.01em;
overflow:hidden;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>

HTML code=====================================

Copy code

The code is as follows:

<div style=”background:#680000; padding:20px”>
<b>
<b><b></b></b>
<b><b></b></b>
<b></b>
<b></b>
<b></b>
</b>
<div style=”background:#b20000; height:100px; font-size:30pt; text-align:center;”>
&bull;&bull;&bull;
</div>
<b>
<b></b>
<b></b>
<b></b>
<b><b></b></b>
<b><b></b></b>
</b>
</div>

If you are interested, try the above two pieces of code.
Although this scheme is quite good, I still think of a similar but more concise implementation. Ha ha, it will be introduced in the following articles.