Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js-CSS-Tutorial-php.cn

Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js

不言

Freigeben： 2018-06-28 13:54:02

Original

1501 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 erzielt

Das 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!