Css+jquery implementation of the page Fillet box method Daquan _jquery

So I would like to use a convenient to call and update the method to achieve, the result is fulfilled. Let's summarize this technical point as follows:

Before this I also looked for the current network of the most popular approach to the implementation of the scheme, summed up a total of 7 methods, but found that their methods are more or less flawed, and later I made my own feel satisfied with the method.
Look at the 7 most popular practices on the web today:

1, no picture of the pure CSS rounded corner box

Included reasons: Strong compatibility, no graphics

Figure I

Characteristics:

1. Use a number of div containers to simulate rounded corners without any graphics.

2. Compatibility: Access to kill all browsers

Disadvantages:

1. The construction of this fillet requires too many semantically-free tags, and the structure is more redundant.

2. Reusability is not strong: If a page has multiple rounded corners, and to achieve a different radius size, it is not flexible enough.

3. Although the border color can be adjusted, but will have a fatal effect on the structure of the page, apply to a single color and a page with little rounded corners applied.

4. It is not easy to realize the graphic background with gradient in the arc.

5. Rounded corners are not sleek, serrated, suitable for background color and current color difference is small and arc smaller pages.

Implementation principle:

With many 1-pixel div containers, the background color and border color are used to simulate the contour of the rounded corners.

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

2, no picture of pure CSS fillet box, with special characters (&bull)

Reasons included: sleek, no graphics

Figure II

Characteristics:

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

2. Compatibility: Access to kill all browsers

3. Round Angle Smoothing

Disadvantages:

1. To construct this fillet, you need to add the semantics of the tag, the structure is redundant, the same as the first.

2. Reusability is not strong: If a page has more than one fillet, and to achieve a different radius size, you need to adjust the positioning of the four corner picture, and the size of the character to its impact, flexibility is not enough.

3. Although the color can be adjusted, but requires the inside background color and character of the same color, can not be made into border lines. Applies to a single color and a page where the rounded corners are not too many.

4. It is not easy to realize the graphic background with gradient in the arc.

Implementation principle:

Using special characters (&bull), using positioning, intercept One-fourth circles to simulate a corner picture of the rounded corner.

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

3, Picture fillet box

Included reasons: Strong compatibility, you can perform a very complex rounded corner effect.

Figure Three

Characteristics:

1. Use four rounded graphics (or a circular picture).

2. Compatibility: Pass kill all browsers.

3. This is the most commonly used fillet frame approach.

4. Because of the use of pictures to show, so its rounded corners are super smooth, without any sawtooth phenomenon.

5. The performance is rich, suitable for each kind of picture performance request High Corner box.

Disadvantages:

1. Construct this fillet also need to add four tags to install four corner picture, the structure also has redundancy.

2. Reusability is not strong: If a page has multiple rounded corners, and to achieve a different radius size, you need to recreate a set of fillet picture.

3. If there is no particular need for redundancy in the structure, this is the solution to the super rounded corner box.

Implementation principle:

Using the principle of nine Sudoku, a four fillet picture with absolute positioning (or relative positioning) is added to the four corners of a container.

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

4, using VML to draw rounded corners (ie only)

Reasons included: no pictures, smooth, shaded borders can be added

Figure Four

Characteristics:

1. Do not use any graphics.

2. Compatibility: only use in IE

3. Round angle radius is adjusted freely

4. Strong reusability: Multiple rounded corners are called arbitrarily.

5. Round corner color set randomly.

6. Structure without redundancy.

7. The rounded corners are smooth and without sawtooth.

Disadvantages:

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

2. Can not be rich in the arc of the gradient picture, because the arc outer frame is transparent.

Implementation principle: Use IE-specific VML to draw rounded corners.

<v:roundrect

Id= "Roundbox"

Class= "Circle"

Strokecolor= "Red"

strokeweight= "2px"

Arcsize= "0.08″>

</v:roundrect >

Note Add Reference space:

Add this sentence to the style sheet:

V ":* {behavior:url (#default #vml);d Isplay:inline-block;}

Arcsize for Radius

Strokeweight to Border line width

Strokecolor is the color of the border line

Example Demo: (see this example in IE series browser)

VML draws smooth rounded corners

Use the IE-specific VML to draw smooth rounded corners, and to draw shadow effects. In terms of its graphical performance, it is perfect.

5, using private property to draw rounded corners (FF3 only)

Reason included: Smooth without sawtooth

Figure Five

Characteristics:

1. Do not use any graphics.

2. Compatibility: Can only be used in FF3, other browsers are not supported.

3. Round angle radius is adjusted freely

4. Reusability strong: Multiple rounded corners arbitrary calls, only need style sheet settings can be.

5. Round corner color set randomly.

6. Structure without redundancy.

7. The rounded corners are smooth and without sawtooth.

Disadvantages:

1. In addition to compatibility problems, other aspects of the performance is good, this way should be the most perfect way, but at present only FF3 can support this property, later CSS3 will support this property, but this does not know how many years after.

2. As with the fifth fillet, it is somewhat powerless to handle the background of the picture within the arc.

Implementation principle:

Use the private property of the FF3 to draw the rounded corners.

The sleek rounded corners can be represented by only two attributes

-moz-border-radius:10px;

BORDER:5PX Red Solid;

Example Demo: (Please watch in FF3 browser, other browsers do not support)

FF3 Private property draw a rounded corner box

FF3 the rounded corner box two properties can be resolved:

-moz-border-radius: Radius

Border: Border

6, no Picture script fillet box (JS semi perfect solution)

This should be the perfect solution at the moment.

Figure Six

Characteristics:

1. Do not use any graphics.

2. Compatibility: Access to kill all browsers

3. Round angle radius is adjusted freely

4. Strong reusability: Multiple rounded corners are called arbitrarily.

5. Color settings, and can use a complex picture as a background, rich performance.

6. Structure without redundancy, only need to define a class or ID on the container can turn this div into rounded corners.

7. Smooth rounded corners.

Disadvantages:

1. The client disables JS when there is no fillet, but in the current situation, this situation should not become too big problem.

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

7, no picture Vml/canvas combined fillet box

Add a scheme that combines the Jquery/vml/canvas corner box without a picture.

Figure Seven

Characteristics:
1. Do not use any graphics.
2. Compatibility: Access to kill all browsers
3. The fillet radius is adjusted freely, and the four corners can be set freely to avoid rounded corners.
4. Strong reusability: Multiple rounded corners are called arbitrarily.
5. Color settings, and can use a complex picture as a background, rich performance.
6. Structure without redundancy, just want to define a class or ID on the container can be.
7. Smooth rounded corners.
Disadvantages:
1. This round angle needs to use the jquery library, and a JS file, if in your project already used the jquery this storehouse, can also use, otherwise, for a rounded corner load one or two JS file a little outweigh the gains.
2. Rounded corners display a little bit of a problem in different browsers.
Example Demo: http://labs.parkerfox.co.uk/cornerz/

Conclusion: The current CSS because it can not define a container for a number of background images, resulting in the fillet effect of the addition of redundant tags. It is said that CSS3 will introduce this attribute, where possible, is the time when the rounded frame is unified. In addition, it is also heard that there is an intention to join the FF3 private attribute (-moz-border-radius) in CSS3, which can solve this problem perfectly. But in the current situation, may also only use these methods to transition, and strongly look forward to the arrival of CSS3.

All in all: to achieve the absolute perfect rounded corners in the current situation is basically impossible, so named "Half perfect Solution."

--------------------------------------------------------------------------------------------------------------- ------------------

My solution: css+jquery+ four-corner fillet picture

The first step: to the website http://jquery.com/download jquery-1.3.2.min.js file, the entire project references the document.
Upcoming <script type= "Text/javascript" language= "JavaScript" src= "Jquery-1.3.2.min.js" > </script> Add to Page < In head>The second step is to write the jquery method on the page where you need to implement the rounded corner (jquery is a framework technique for JS).
Source:

Copy Code code as follows:

<div class= "Corner2 Clear" >
<div class= "bnlist Detail" >
<asp:button text= "Query" id= "Btsearch" runat= "Server" onclick= "btnSearch_Click"/>
<asp:button text= "Export" runat= "server" onclick= "Btnexport_click"/>
<asp:button text= "print" id= "Btnprint" runat= "Server" onclick= "Btnprint_click"/>
<asp:button text= "Print continuously" runat= "server" onclick= "Btncontinueprint_click"/>
</div>
</div>

JS Code:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (". Corner"). Prepend ("<div class=\" cortop\ "><div class=\" bgcortopl\ "></div><div class=\" Bgcortopr\ "></div></div>");
$ (". Corner"). After ("<div class=\" corbom\ "><div class=\" bgcorboml\ "></div><div class=\" Bgcorbomr\ "></div></div>");
</script>

Generated HTML code:

Copy Code code as follows:

<div class= "Corner" ><div class= "cortop" ><div class= "BGCORTOPL"/><div class= "Bgcortopr"/> </div>
<div class= "bnlist Detail" >
<input type= "Submit" id= "Ctl00_cphcontent_btsearch" value= "Query"/>
<input type= "Submit" value= "Export" name= "ctl00$cphcontent$ctl00"/>
<input type= "Submit" id= "Ctl00_cphcontent_btnprint" value= "print"/>
<input type= "Submit" value= "Continuous printing"/>
</div>
</div>
<div class= "Corbom" ><div class= "bgcorboml"/><div class= "BGCORBOMR"/></div>

Step three: Edit the CSS style to achieve the rounded corners you want.


Summary: As long as the above will do round the DIV block source code in class= "Corner", by calling the JS code, you can generate a div tag that wants to do a rounded background, and you don't need to manually add that code to each corner block, which makes the work simple and the source files clear and concise, Facilitates developer and UI personnel.