Heim >Web-Frontend >CSS-Tutorial >Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js
Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js
- 不言Original
- 2018-06-28 13:54:021503Durchsuche
Dieser Artikel stellt hauptsächlich den mit js implementierten abstrakten CSS-Effekt mit abgerundeten Ecken vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.
Es war wahrscheinlich letztes Jahr. Nun, ich habe im Internet vorgefertigte CSS- und HTML-Codes für CSS-Effekte mit abgerundeten Ecken gesehen, wie zum Beispiel:
<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>Natürlich ist es auch sehr einfach zu verwenden, wenn der Wert für abgerundete Ecken lautet Grundsätzlich kann der obige Code verwendet werden, wenn Sie die Größe dieser abgerundeten Ecke ändern und dieser Ecke einen Rand- oder Basiseffekt hinzufügen möchten Ich möchte es einfach machen. Es hat dieses Jahr fast einen Tag gedauert! Kreis und der Ausdruck des Kreises Es ist x*x+y*y=r*r, das heißt, das Quadrat von x plus das Quadrat von y ist gleich dem Quadrat des Radius! Ich erkannte, dass die Kreislösung gelöst werden kann!
Beginnen Sie mit dem Testen Schritt für Schritt vom Null-Schwierigkeitsgrad bis zur Komponentisierung.
[Top][Top Rounded Corner Display! Steuerung][/Oben] [Hauptteil][Kreislösungssteuerung auf der linken Seite des Hauptteils anzeigen][Hauptteilinhalt][Eckensteuerung auf der rechten Seite des Hauptteils anzeigen][/Hauptteil]
[Unten][Anzeigesteuerung für die untere Kreislösung][/Unten]
Holen Sie sich den heutigen Testcode:
<!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>Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies der Fall sein wird Hilfreich für das Lernen aller. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
So implementieren Sie gepunktete Ränder mit DIV und CSS |. CSS gepunktete Unterstreichungen und gepunktete Linien CSS Durch die Verwendung der Sprites-Technologie wird der Effekt abgerundeter Ecken erzieltDas obige ist der detaillierte Inhalt vonAbstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!