How to Use CSS to achieve rounded corner _ CSS to achieve rounded corner Solution

How to Use CSS to achieve rounded corners_ CSS rounded corner Solution

Introduction:

This article discusses the ultimate solution of the rounded corner frame. The key words are "smooth, perfect, compatible, reusable, and semantic". These technologies are the most popular practices on the network. All methods have their own advantages. Please use them in different environments.

Corner frame, because its style is more beautiful than the right angle frame, becomes a preferred design element in the designer's mind. In today's web standards, a large number of web pages and blogs are all designed with rounded corners, making them a beautiful landscape.
However, this rounded corner has become a shadow that the front-end personnel of the web page can never erase. It can be said to be painful and loving. What I love is its beauty. What hurts is to make it compatible with various browsers, but it becomes a myth forever.
Let's review the solutions that are currently popular on the Internet.

First: no image, pure CSS rounded corner Frame

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, suitable for pages with a single color and a page with few rounded corners.
4. It is not easy to implement an image background with gradient 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

Type 2: no image CSS rounded corner box, with special characters (& bull)

Reason for recording: Smooth, no need for graphics

Figure 2

Features:

1. Use special characters • (DOTS) to simulate rounded corners without any graphics.
2. Compatibility: Kill all browsers
3. Rounded corner

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 an image background with gradient 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

Third: Image rounded corner Frame

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

Figure 3

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 a variety of corner boxes with high image performance requirements.

Disadvantages:

1. To create this rounded corner, you also need to add four labels to the image, and the structure is redundant.
2. Poor reusability: If a page has multiple rounded corners and different radius sizes are required, you need to recreate a set of rounded corners.
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

Type 4: Use VML to draw rounded corners (ie Only)

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

Figure 4

Features:

1. No image is required.
2. Compatibility: 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, the performance in other aspects is 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.

<V: roundrect
Id = "roundbox"
Class = "circle"
Strokecolor = "red"
Strokeweight = "2px"
Arcsize = "0.08">
</V: roundrect>

Note:

<HTML xmlns: V xmlns = "http://www.w3.org/1999/xhtml">

This is a compatible usage,

Xmlns: v1...
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)

The Code is as follows:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns: V xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> VML smooth rounded corner frame </title>
<Style>
V \: * {behavior: URL (# default # VML); display: inline-block ;}
Body {background-color: #99 FFFF; font-size: 12px ;}
. Circle {
Height: 130px;
Width: 300px;
Padding-top: 8px;
Margin: 0px auto;
Z-index: 2;
Margin-left: 340px;
}
H1 {border-bottom: 2px red solid; font-size: 12px; margin: 4px; text-indent: 1em; Height: 20px ;}
Div {font-size: 12px; padding: 10px ;}
</Style>
</Head>
<Body>
<V: roundrect id = "roundbox" class = "circle" strokecolor = "red" strokeweight = "2px" arcsize = "0.08">
<H1> draw smooth rounded corners in VML <Div class = "T1">
Use VML for IE to draw a smooth rounded corner box and draw a shadow effect. Its graphic performance is perfect.
</Div>
<V: Shadow on = "T" color = "#777" opacity = "52428f" offset = "1.5pt, 1.5pt"/>
</V: roundrect>
</Body>
</Html>

Fifth: use private attributes to draw rounded corners (ff3 only)

Reason: smooth and non-sawtooth

Figure 5

Features:

1. No image is required.
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 background of the image 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;/* rounded corner radius */
Border: 5px red solid;/* border size */

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

The Code is as follows:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> rounded corner box under ff3 </title>
<Style type = "text/CSS">
Body {Background: # cccccc ;}
. Round {
-Moz-border-radius: 20px;/* radius */
Border: 4px solid #333;/* Border Width */
Margin: 50px auto; width: 30%; Height: 150px; font-size: 12px;
}
H1 {border-bottom: 4px #333 solid; font-size: 12px; width: 100%; padding: 5px 0; text-indent: 1em ;}
. Context {font-size: 12px; padding: 10px ;}
</Style>
</Head>
<Body>
<Div class = "round">
<H1> the rounded corner box drawn by the ff3 private attribute <Div class = "context">
<P> two attributes of the rounded corner box under ff3 can be solved: </P>
<P>-moz-border-radius: radius </P>
<P> border: border </P>
</Div>
</Div>
</Body>
</Html>

Type 6: corner box without image script (JS semi-perfect solution)

This solution should be a perfect solution now.

Figure 6

Features:

1. No image is required.
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. No redundant structure. You only need to define a class or ID on the container to convert the DIV into a rounded corner.
7. Rounded corners.

Disadvantages:

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

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

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 ".