js!!_javascript 기술로 구현된 추상 CSS 둥근 모서리 효과

아마도 작년에 인터넷에서 CSS 둥근 모서리 효과를 위한 기성 CSS 및 HTML 코드를 본 적이 있을 것입니다.

div.RoundedCorner{배경: #9BD1FA}
b.rtop, b.rbottom{ 디스플레이: 블록;배경: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: Hidden; 배경: #9BD1FA}
b.r1{margin: 0 5px } b.r2{마진: 0 3px}
b.r3{마진: 0 2px}











물론 이런 식으로 필렛 값을 인위적으로 설정하는 것도 사용하기 매우 쉽습니다. 기본적으로 이 코드를 가져와서 사용하면 됩니다. 하지만 이 둥근 모서리의 크기를 변경하거나 이 모서리에 테두리를 추가하거나 그 효과를 기반으로 하면 이 코드는 그 힘을 발휘할 수 없게 됩니다. 나는 추상적인 구성 요소 기반의 것을 만들고 싶습니다. 올해는 거의 하루 걸렸네요!

생각해 보세요. 둥근 모서리 네 개를 더하면 정확히 원이 되고, 원의 표현은 x*x y*y=r* r이 됩니다. 즉, x의 제곱과 y의 제곱은 반지름의 제곱과 같습니다! 이 공식을 사용하면 원 해법 실현 이론을 해결할 수 있습니다.

아니오에서 예까지 단계별로 테스트를 시작하세요! , from 컴포넌트화의 어려움을 줄이겠습니다! 둥근 모서리 구현을 다음 구조로 나누었습니다. 본체 좌측] [메인컨텐츠][본체 우측 모서리 컨트롤 표시][/본체] nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[하단][하단원 표시 컨트롤][/하단]
오늘의 테스트 받기 코드:




CSS 둥근 상자와 구성 요소 개발 테스트 프로세스