Probably last year, I saw CSS and HTML code for the off-the-shelf CSS rounded corner effect on the Internet, for example:
<Html>
<Head>
<Title> css rounded corner effect </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Style type = "text/css">
Div. RoundedCorner {background: # 9BD1FA}
B. rtop, B. rbottom {display: block; background: # FFF}
B. rtop B, B. rbottom B {display: block; height: 1px; overflow: hidden; background: # 9BD1FA}
B. r1 {margin: 0 5px}
B. r2 {margin: 0 3px}
B. r3 {margin: 0 2px}
B. rtop B. r4, B. rbottom B. r4 {margin: 0 1px; height: 2px}
</Style>
</Head>
<Body>
<Div class = "RoundedCorner">
<B class = "rtop"> <B class = "r1"> </B> <B class = "r2"> </B> <B class = "r3"> </B> <B class = "r4"> </B>
1
<B class = "rbottom"> <B class = "r4"> </B> <B class = "r3"> </B> <B class = "r2"> </B> <B class = "r1"> </B>
</Div>
</Body>
</Html>
Of course, you can set the rounded corner value manually and use it very well. Basically, this code can be used in the past, but if you want to change the rounded corner size, to add a border or base it on this corner, this code won't be able to exert its power. I want to create a componentized image! This year has taken almost one day!
Think about it. The four corners of the rounded corner are exactly a circle, and the circle expression is x * x + y * y = r * r, that is, the square of x plus the square of y equals the square of the radius! With this formula, the theory of realizing the circular solution is right!
Start step-by-step testing from scratch, from zero difficulty to componentization! I divide the implementation of a rounded corner into such a structure.
[Top] [top rounded corner display control] [/top]
[Subject] [Circular solution control on the left of the subject] [subject content] [on the right of the subject] [/subject]
[Bottom] [bottom circle display control] [/bottom]
Get the test code for today:
<! 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> CSS rounded corner frame and component development-test process </title>
<Style type = "text/css">
<! --
# Box, # topbox, # bottombox {
Width: 400px;
}
# Box. content {background-color: # FFCC00; height: 400px ;}
<? Php
For ($ y = 1; $ y <= 4; $ y ++ ){
$ X = (int) sqrt (4*4-$ y * $ y );
$ Sx = 4-$ x;
Echo ". line {$ y} {height: 1px; overflow: hidden; background-color: # FFCC00; margin: 0 {$ sx} px;} \ n ";
}
?>
-->
</Style>
</Head>
<Body>
<Div id = "topbox">
<? Php
For ($ y = 4; $ y> = 1; $ y --){
Echo "<div class = \" line {$ y} \ "> </div> \ n ";
}
?>
</Div>
<Div id = "box">
<Div class = "content"> aaaaaaaaaaaaaaaa </div>
</Div>
<Div id = "bottombox">
<? Php
For ($ y = 1; $ y <= 4; $ y ++ ){
Echo "<div class = \" line {$ y} \ "> </div> \ n ";
}
?>
</Div>
</Body>
</Html>