ホームページ > 記事 > ウェブフロントエンド > jsで実装された抽象CSS角丸効果
jsで実装された抽象CSS角丸効果
- 不言オリジナル
- 2018-06-28 13:54:021464ブラウズ
この記事は主に 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>もちろん、この方法で人為的に角丸値を設定することも、基本的には非常に簡単です。を使用することはできますが、この角の丸いサイズを変更したり、この角に境界線を追加したり、その効果をベースにしたりする場合、このコードはその力を発揮できなくなります。抽象的なコンポーネントを作成したいだけです。今年はほぼ1日かかったと言っても過言ではありません
考えてみると、丸い角の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> 上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトを参照してください。
関連する推奨事項: DIV と CSS で点線の境界線を実装する方法
以上がjsで実装された抽象CSS角丸効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。