この記事は主に js で実装された抽象的な CSS 角丸効果を紹介します。これは必要な友人に参照してもらえるように共有します。既製の CSS 角丸効果を渡した CSS および HTML コード、たとえば:
<html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> p.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> <p 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> </p> </body> </html>
考えてみると、丸い角の4つの角を足すとちょうど円になり、その円の式はx*x+y*yになります。 =r*r、つまり x の 2 乗と y の 2 乗を加算したものは、半径の 2 乗に等しいです。何もないから何かへ、難易度ゼロからコンポーネント化まで! I 角丸実装を次の構造に分割します
[top][上部の角丸表示コントロール][/top][本体][左側の角丸表示コントロール]本体][メインコンテンツ][本体右側の表示コーナーコントロール][ /本体]
[下][下の円の解表示コントロール][/下]今日のテストコードを取得:
<!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圆角框加组件开发--测试过程</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> <p id="topbox"> <?php for($y=4;$y>=1;$y--){ echo "<p class=\"line{$y}\"></p>\n"; } ?> </p> <p id="box"> <p class="content"> aaaaaaaaaaaaaaaaaa</p> </p> <p id="bottombox"> <?php for($y=1;$y<=4;$y++){ echo "<p class=\"line{$y}\"></p>\n"; } ?> </p> </body> </html>
以上がjsで実装された抽象CSS角丸効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。