이 글은 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>
물론 이런 방식으로 둥근 모서리 값을 인위적으로 설정하는 것도 기본적으로 사용하기 매우 쉽습니다. 사용할 수 있지만 이 둥근 모서리의 크기를 변경하려는 경우 이 모서리에 테두리를 추가하거나 그 효과를 기반으로 하면 이 코드는 그 힘을 발휘할 수 없습니다. 저는 단지 추상적인 구성 요소를 만들고 싶을 뿐입니다. 올해는 거의 하루 걸렸다고 할 수 있어요!
생각해보면 둥근 모서리 네 모퉁이를 합하면 정확히 원이 되고 그 원의 표현은 x*x+y*y가 됩니다. =r*r, 즉 x 제곱에 y의 제곱을 더하면 반지름의 제곱이 됩니다! 이 공식을 사용하면 원형 해 구현 이론이 풀릴 수 있습니다.
다음에서 단계별 테스트를 시작하세요! 아무것도 아닌 것부터 구성요소화까지! 둥근 모서리 구현을 다음과 같은 구조로 나눕니다. 본체][메인컨텐트][본체 오른쪽 표시 코너 컨트롤][ /본체]
[하단][하단 원 솔루션 표시 컨트롤][/하단]
오늘의 테스트 코드 받기 :
<!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>
관련 권장 사항 : DIV 및 CSS로 점선 테두리를 구현하는 방법 |
위 내용은 js로 구현된 추상 CSS 둥근 모서리 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!