Abstract CSS rounded corner effect implemented with js!!_javascript skills

Probably last year, I saw ready-made CSS and HTML codes for CSS rounded corner effects on the Internet, such as:

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 }


1

Of course, artificially setting the fillet value in this way is also very easy to use. Basically, just take this code and use it. , but if you want to change the size of this rounded corner, add a border to this corner or base its effect, then this code will not be able to exert its power. I want to make an abstract component-based thing. Come out! It took almost a day this year!

Think about it, the four corners of the rounded corners add up to exactly a circle, and the expression of a circle is x*x y*y=r* r, that is, the square of x plus the square of y is equal to the square of the radius! With this formula, the theory of realizing the circle solution can be solved!

Start testing step by step from no to yes, from Let’s reduce the difficulty to componentization! I divided a rounded corner implementation into the following structure nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[top][top rounded corner display control][/top]
[main body][display rounded corner control on the left side of the main body] [Main content][Display corner control on the right side of the body][/Main body] [Bottom][Bottom circle display control][/Bottom]
Get today’s test code:





CSS rounded box plus component development-testing process

for($y=4;$y>=1;$y--){
echo "

n";

}
? >

aaaaaaaaaaaaaaaaa for($y=1 ;$yecho "n"; } ?>