From: http://golen.blog.sohu.com/96114249.html
Creating a good standard web site requires more consideration for scalability. A website with good scalability will bring great convenience for later maintenance and upgrade.
Now, let's summarize how to create a scalable rounded rectangle since I made the Web:
Method 1:
Name: round.gif:
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 = gb2312"/>
<Title> How to Create a rounded rectangle </title>
<Style>
* {Font-size: 12px}
. Roundbox {
Position: relative;
Border: 1px solid # 6d298e;
Width: 400px;/* different widths can be changed as needed */
Padding: 8px;
Line-Height: 22px
}
. Roundbox span {
Display: block;
Position: absolute;
Width: 5px;
Height: 5px;
Font-size: 0
}
. Top_left {
Left:-1px;
Top:-1px;
Background: url(round.gif) top left
}
. Top_right {
Right:-1px;
Top:-1px;
Background: url(round.gif) Top right;
}
. Bottom_left {
Left:-1px;
Bottom:-1px;
Background: url(round.gif) Bottom left;
}
. Bottom_right {
Right:-1px;
Bottom:-1px;
Background: url(round.gif) Bottom right;
}
</Style>
</Head>
<Body>
<Div class = "roundbox">
<SPAN class = "top_left"> </span>
<SPAN class = "top_right"> </span>
<SPAN class = "bottom_left"> </span>
<SPAN class = "bottom_right"> </span>
Here is a rounded rectangle with a width of 416px, a rounded rectangle with a width of 416px, a rounded rectangle with a width of 416px, and a rounded rectangle with a width of 416px, here is a rounded rectangle with a width of 416px
</Div>
</Body>
</Html>
In PS: 1.css, font-size: 0 mainly solves a bug in ie6.0;
2. I personally agree with this approach. method 1 has good scalability and the code is concise and clear.
Method 2:
1. Draw a rounded rectangle large enough in PS (I am painting 660*339 elements here, but it is actually a little small)
Name: bground.gif
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 = gb2312"/>
<Title> How to Create a rounded rectangle </title>
<Style>
* {Font-size: 12px}
. C,. c I,. c I,. c B,. c B,. C P {Background: url(bground.gif) No-repeat
}
. C {
Width: 200px;/* different widths can be changed as needed */
Background-position: 0-4px;
}
. C I {
Display: block;
Height: 4px;
Font-size: 0
}
. C I {
Margin: 0 0 0 4px;
Background-position: Right 0;
}
. C B {
Display: block;
Height: 4px;
Background-position: 0 bottom;
Font-size: 0
}
. C B {
Margin: 0 0 0 4px;
Background-position: right bottom;
}
. C p {
Margin: 0 0 0 4px;
Padding: 8px;
Background-position: Right-4px;
Line-Height: 22px
}
</Style>
</Head>
<Body>
<Div class = "C">
<I> </I>
<P>
Here is a rounded rectangle with a width of 216px, a rounded rectangle with a width of 216px, a rounded rectangle with a width of 216px, and a rounded rectangle with a width of 216px,
</P>
<B> </B>
</Div>
</Body>
</Html>
PS: the disadvantage of this method is that there are some meaningless labels, as if the web standards do not agree with the use of such labels.
Preview separately:
Method 3:
CSS code is used to achieve rounded corners without images.
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 = gb2312"/>
<Title> untitled document </title>
<Style>
* {Font-size: 12px}
. Roundbox {width: 400px/* different widths can be changed as needed */}
. Roundbox Div {padding: 8px; border-left: 1px solid # 6d298e; border-Right: 1px solid # 6d298e}
. R {border-Right: 1px solid # 6d298e; border-left: 1px solid # 6d298e; Height: 1px; font-size: 1px; overflow: hidden; display: block ;}
. A1 {margin: 0 5px; Background: # 6d298e ;}
. A2 {margin: 0 3px; border-right-width: 2px; border-left-width: 2px ;}
. A3 {margin: 0 2px ;}
. A4 {margin: 0 1px; Height: 2px ;}
. A5 {Height: auto; font-size: Medium ;}
</Style>
</Head>
<Body>
<Div class = "roundbox">
<B class = "r A1"> </B> <B class = "r A2"> </B> <B class = "r A3"> </B> <B Class = "r A4"> </B>
<Div> here is a rounded rectangle with a width of PX, and a rounded rectangle with a width of PX, here is a rounded rectangle with a width of PX, and a rounded rectangle with a width of PX, here is a rounded rectangle with a width of PX. </div>
<B class = "r A4"> </B> <B class = "r A3"> </B> <B class = "r A2"> </B> <B Class = "r A1"> </B>
</Div>
</Body>
</Html>
Preview:
PS: It seems that the rounded corner is not smooth, and the radians of the corner are not well controlled. I feel that this method is better than the first two methods.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
