Preface: In my article "Semi-Perfect Solution for Super Smooth Rounded Corner Frame", I have summarized seven different solutions for rounded corner boxes, which basically summarizes the popular rounded corner box implementation solutions on the Internet. And in my other article "Pictureless Peak Corner" is another alternative implementation method.
Implementing rounded corners with pure CSS is an event that everyone says is bad. I have also written two summary articles. Why is there still this article? The thing is like this. In our previous projects, the implementation of rounded corners was often achieved using background images. However, when these projects were released online, during the maintenance process, sometimes it was necessary to add some new requirements because they were widely used in previous projects. Rounded corner images are used, and these images are all merged using CSS sprites. In order not to add more extra work, and also do not want to use JS to add more http requests, some simple CSS solutions are needed to solve this question. As for my personal preference, I also like to use a picture-free approach to handle these effects. I always feel that CSS can do the job, why not let it be done?
Implementation principle :
The principle of implementing a rounded corner box using pure CSS has been explained in detail by many people on the Internet. The diagram below is the effect after I enlarged one of the rounded corners.
From the renderings above, we can see that this rounded box is actually made up of containers. Each container has a different width. This width is achieved by the margin, such as: margin:0 5px; That is, the margins on the left and right sides are 5 pixels, and there are 5 lines from top to bottom. The margins are 5px, 3px, 2px, and 1px, decreasing in order. So based on this principle we can implement simple html structure and style.
1. Html structure layer:
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">Text content</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4 constitute the two left and right rounded corner structures above, while b5~b8 construct the two left and right rounded corner structures below. Content is the main body of the content. Put it all in a large container and give it a class name sharp to set a common style. Then a color1 class name is superimposed on it. This class name is used to distinguish different color schemes, because there may be rounded corners of different colors.