Heim > Artikel > Web-Frontend > Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js

Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js

不言Original: 2018-06-28 13:54:021449Durchsuche

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

php css html JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：DIV- und CSS-Methoden zum Implementieren von gepunkteten Rändern |. CSS-gepunktete Unterstreichungen und gepunktete LinienNächster Artikel：DIV- und CSS-Methoden zum Implementieren von gepunkteten Rändern |. CSS-gepunktete Unterstreichungen und gepunktete Linien

In Verbindung stehende Artikel

Mehr sehen