js로 구현된 추상 CSS 둥근 모서리 효과
- 不言원래의
- 2018-06-28 13:54:021471검색
이 글은 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으로 문의하세요.