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:021374parcourir
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 :
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!