Probably last year, I saw the CSS and HTML code of ready-made CSS fillet effect on the Internet, for example:
<title>css Fillet 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>
<body>
<div class= "Roundedcorner" >
<b class= "Rtop" ><b class= "R1" ></b><b class= "R2" ></b><b class= "R3" ></b> <b class= "R4" ></b></b>
1
<b class= "Rbottom" ><b class= "R4" ></b><b class= "R3" ></b><b class= "R2" ></b ><b class= "R1" ></b></b>
</div>
</body>
Of course, so artificial to set the fillet value, but also very useful, basically this code to take the past can be used, but if you want to change the size of the fillet, you want to add a border or a base to its effect in this corner, then this code can not play its power. Just want to do a smoke-like component of something out! This year is a time spent almost a day!
Think about it, the rounded corners of the four corners together is exactly a circle, and the expression of the circle is X*x+y*y=r*r, that is, x squared plus y squared is equal to the radius of the square! With this formula, the theory of the realization of the circle solution can be resolved!
The beginning of a step-by-step test by No to have, by 0 difficult to the Assembly bar! I divide a fillet into such a structure
[Top] [Top fillet Display control] [/Top]
Subject [Show the Circle to the left of the body] [Main content] [Show Cape Control on the right side of the body] [/subject]
Bottom [Bottom Circle Solution Display control] [/Bottom]
Get today's test code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<TITLE>CSS Corner Box Plus component development--testing 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>
<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" > aaaaaaaaaaaaaaaaaa</div>
</div>
<div id= "Bottombox" >
<?php
For ($y =1 $y <=4; $y + +) {
echo "<div class=\" line{$y}\ "></div>\n";
}
?>
</div>
</body>
