CSS + Jquery Implementation of page rounded corner box _ jquery

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, this effect is not optimized and concise enough for the entire project. So 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

Features:

1. Without any graphics, use multiple p 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 many p 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

Features:

1. Use special characters • (DOTS) to simulate rounded corners without any graphics.

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

3. Image rounded corner

Reason for inclusion: strong compatibility and complicated rounded corner effects.

Features:

1. Use four rounded corners (or a circular image ).

2. Compatibility: removes all browsers.

3. This is the most common rounded corner frame practice.

4. Because the image is used for display, the rounded corner is super smooth and there is no sawtooth phenomenon.

5. Rich performance, suitable for all kinds of corner boxes with high image performance requirements.

Disadvantages:

1. To construct the rounded corner, you also need to add four labels to hold four angle images. The structure is also redundant.

2. Poor reusability: If a page has multiple rounded corners with different radius sizes, You need to recreate a set of rounded corner images.

3. If there is no special need for structure redundancy, This is the super smooth rounded corner box solution.

Implementation principle:

Based on the jiugongge principle, add four rounded corner images with absolute positioning (or relative positioning) to the four corners of a container.

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

4. Use VML to draw rounded corners (ie only)

Reason for recording: no image, smooth, shadow border added

Features:

1. No graphics are needed.

2. Compatibility: it can only be used in IE.

3. Adjust the radius of the rounded corner at will

4. High reusability: Multiple rounded corners can be called at will.

5. Set the rounded corner color at will.

6. No redundant structure.

7. The rounded corner is smooth and non-sawtooth.

Disadvantages:

1. In addition to compatibility problems, other aspects of performance are good.

2. You cannot add a wide range of gradient images to an arc because the arc frame is transparent.

Implementation principle: Use VML for IE to draw rounded corners.

Id = "roundbox"

Class = "circle"

Strokecolor = "red"

Strokeweight = "2px"

Arcsize = "0.08">

Note:

This is a compatible usage. xmlns: vmust be unique, otherwise...

Add this sentence to the style sheet:

V ": * {behavior: url (# default # VML); display: inline-block ;}

Arcsize is the radius

Strokeweight indicates the border line width.

Strokecolor indicates the border line color.

Example: (view this instance in IE browser)

VML draws smooth rounded corners

Use VML for IE to draw a smooth rounded corner box and draw a shadow effect. Its graphic performance is perfect.

5. Use private attributes to draw rounded corners (FF3 only)

Reason: smooth and non-sawtooth

Features:

1. No graphics are needed.

2. Compatibility: it can only be used in ff3. other browsers are not supported.

3. Adjust the radius of the rounded corner at will

4. High reusability: Multiple rounded corners can be called at will. You only need to set the style sheet.

5. Set the rounded corner color at will.

6. No redundant structure.

7. The rounded corner is smooth and non-sawtooth.

Disadvantages:

1. in addition to compatibility issues, other aspects of the performance are good, this method should be the most perfect way, but at present only FF3 can support this attribute, it will be supported in the future CSS3, but I don't know how many years later.

2. Like the fifth rounded corner, it seems powerless to process the image background in the ARC.

Implementation principle:

Use the private attributes of FF3 to draw rounded corners.

Only two attributes are used to show the smooth rounded corner frame.

-Moz-border-radius: 10px;

Border: 5px red solid;

Instance Demonstration: (Please watch in FF3 browser, not supported by other browsers)

FF3 rounded corner box for private attribute painting

Two attributes of the rounded corner box under FF3 can be solved:

-Moz-border-radius: radius

Border: border

6. No image script rounded corner box (js semi-perfect solution)

This solution should be a perfect solution now.

Features:

1. No graphics are needed.

2. Compatibility: Kill all browsers

3. Adjust the radius of the rounded corner at will

4. High reusability: Multiple rounded corners can be called at will.

5. You can set the color at will, and use complex images as the background for rich performance.

6. The structure is redundant. You only need to define a class or ID on the container to convert the p to a rounded corner.

7. smooth rounded corners.

Disadvantages:

1. When the client disables JS, there is no rounded corner. However, in the current situation, this situation should not become a big problem.

Example Demo: http://www.curvycorners.net/examples.php (with three demo examples)

7. No rounded corner frame in combination with image vml/canvas

Add a scheme that combines jquery/vml/canvas's no-image rounded corner frame.

Features:
1. No graphics are needed.
2. Compatibility: Kill all browsers
3. Adjust the radius of the rounded corner at will, and set the four corners as needed.
4. High reusability: Multiple rounded corners can be called at will.
5. You can set the color at will, and use complex images as the background for rich performance.
6. No redundant structure. You only need to define a class or ID on the container.
7. smooth rounded corners.
Disadvantages:
1. the jquery library and a JS file are used for this rounded corner. If Jquery is used in your project, it can be used. Otherwise, loading one or two JS files into a rounded corner is not worth the candle.
2. the rounded corner is displayed in different browsers.
Example: http://labs.parkerfox.co.uk/cornerz/

Conclusion: currently, css cannot define multiple background images for a container, leading to redundant labels for this effect. It is said that CSS3 will introduce this attribute. It may be time to unify the rounded corners. In addition, I also heard that CSS3 intends to add methods like FF3 private attributes (-moz-border-radius), which can perfectly solve this problem. However, in the current situation, we may only use these methods to make the transition. We strongly look forward to the arrival of CSS3.

All in all: to achieve an absolute perfect rounded corner frame is basically impossible in the current situation, so it is named "semi-perfect solution ".

Else ---------------------------------------------------------------------------------------------------------------------------------

My solution: CSS + Jquery + rounded corner image with four corners

Step 1: Download The jquery-1.3.2.min.js file at http://jquery.com/to reference the file.
Coming soon