Abstract CSS rounded corner effect implemented by js !!

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.