Use CSS + Jquery to implement the page rounded corner frame Effect

Recently, when I was working on a project, I needed to use a large number of Box blocks with rounded corners of the page. Previously, I used image as the background and other methods. That method is quite feasible for a few, however, it is not optimized and concise to use this effect for the entire project. Therefore, I want to use a method that is convenient to call and update, and the result is as expected. The technical points are summarized as follows:
 Before that, I have also looked for implementation solutions for the most popular practices on the network. I have summarized seven methods in total, but found that their methods are more or less flawed, later, I made a method that I felt satisfied. First, let's look at the seven most popular practices on the Internet:
1. No image css rounded corner box

Reason: strong compatibility, no need for graphics

Figure 1

Features:

1. Without any graphics, use multiple div containers to simulate the rounded corner effect.

2. Compatibility: Kill all browsers

Disadvantages:

1. Too many non-semantic labels are required to construct the rounded corner. The structure is redundant.

2. Poor reusability: If a page has multiple rounded corners and different radius sizes are required, the flexibility is not enough.

3. Although the border color can be adjusted, it will have a fatal impact on the structure of the page. It is suitable for pages with a single color and few rounded corners on a page.

4. It is not easy to implement a gradient image background in the ARC.

5. The rounded corner frame is not smooth enough and has a sawtooth image. It is suitable for webpages with a small background color and a small arc.

Implementation principle:

Use a lot of div containers with a height of 1 pixel, and use the background color and border color to simulate the contour of the rounded corner frame.

Example: http://www.cssplay.co.uk/boxes/snazzy.html

2. There is no image-only css rounded corner box, with special characters (& bull)

Reason for recording: Smooth, no need for graphics

Figure 2

Features:

1. Use special characters & bull; (DOT) to simulate the rounded corner.

2. Compatibility: Kill all browsers

3. smooth rounded corners

Disadvantages:

1. To construct this rounded corner, add a non-semantic tag. The structure is redundant, the same as the first one.

2. Poor reusability: If a page has multiple rounded corners and different radius sizes need to be achieved, you need to adjust the positioning of the four angle images, and the character size has an impact on them, and the flexibility is not enough.

3. Although the color can be adjusted, the background color must be the same as the Character Color and cannot be used as a border line. It is applicable to pages with a single color and not many rounded corners in a page.

4. It is not easy to implement a gradient image background in the ARC.

Implementation principle:

Use special characters (& bull) to capture a corner image of the rounded corner frame in 1/4.

Example: http://www.cssplay.co.uk/boxes/curves.html

• Four pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• Next Page