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.

Tags: , , ,

Recommended Today

Explanation of websocket heartbeat reconnection

Recently, websocket has been used in the development of applet. The applet provides corresponding native API, which is different from H5 API. Therefore, some mature class libraries of popular H5 are difficult to use, and the native API has some defects, so it implements a set of heartbeat reconnection mechanism by itself. First, let’s briefly […]