Maison > Article > interface Web > Effet de coin arrondi CSS abstrait implémenté avec js

Effet de coin arrondi CSS abstrait implémenté avec js

不言original: 2018-06-28 13:54:021442parcourir

Cet article présente principalement l'effet abstrait de coins arrondis CSS implémenté avec js. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

C'était probablement l'année dernière. Eh bien, j'ai vu sur Internet des codes CSS et HTML prêts à l'emploi pour les effets de coins arrondis CSS, tels que :

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

Bien sûr, il est également très facile à utiliser si le coin arrondi la valeur est artificiellement définie de cette manière, en gros, ce code peut être utilisé dès que vous le prenez, mais si vous souhaitez modifier la taille du coin arrondi, ajouter une bordure à ce coin ou baser son effet, alors ce code le fera. Je ne peux pas exercer son pouvoir. Je veux créer un truc abstrait à base de composants ! Cela a pris presque une journée cette année

Pensez-y, les quatre coins des coins arrondis s'additionnent pour faire exactement un ! cercle, et le rond L'expression est x*x+y*y=r*r, c'est-à-dire que le carré de x plus le carré de y est égal au carré du rayon Avec cette formule, la théorie de la réalisation ! la solution du cercle peut être résolue !

Commencez les tests étape par étape de rien à quelque chose, de zéro difficulté à la création de composants ! J'ai divisé une implémentation aux coins arrondis dans cette structure
[Haut][Contrôle d'affichage des coins arrondis supérieurs ! ][/Top]
[Corps principal][Afficher le contrôle de la solution en cercle sur le côté gauche du corps][Contenu du corps principal][Afficher le contrôle de coin sur le côté droit du corps][/Corps principal]
[En bas][Contrôle d'affichage de la solution du cercle inférieur][/En bas]
Obtenez le code de test d'aujourd'hui :

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il vous sera utile. à l'apprentissage de tous. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter des bordures en pointillés avec DIV et CSS | Soulignements en pointillés et lignes pointillées CSS

CSS l'utilisation de la technologie Sprites permet d'obtenir l'effet de coins arrondis

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php css html JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthodes DIV et CSS pour implémenter des bordures en pointillés CSS |Article suivant：Méthodes DIV et CSS pour implémenter des bordures en pointillés CSS |

Articles Liés

Voir plus