js로 구현된 추상 CSS 둥근 모서리 효과-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

js로 구현된 추상 CSS 둥근 모서리 효과

不言

Jun 28, 2018 pm 01:54 PM

이 글은 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>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 확인해주세요. PHP 중국어 홈페이지를 팔로우해주세요!

관련 권장 사항 : DIV 및 CSS로 점선 테두리를 구현하는 방법 |

위 내용은 js로 구현된 추상 CSS 둥근 모서리 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.