Partagez comment créer des bordures CSS arrondies autres que le rayon de bordure

Utiliser l'attribut border-radius de CSS3 pour créer des bordures arrondies est assez simple. Cependant, les problèmes de compatibilité des navigateurs ne sont pas faciles à gérer. Nous résumerons ici les méthodes permettant de créer des bordures arrondies CSS autres que border-radius.

border-radius de CSS3
utilise p CSS pour générer des bordures arrondies, qui est utilisé dans de nombreux cas. Actuellement, l'une des p bordures arrondies CSS utilise CSS3 et l'autre utilise la mise en page pour. simuler des coins arrondis.
Parlons d'abord de la première méthode, utilisant CSS3. Le principe est que votre navigateur doit prendre en charge CSS3. De nombreux sites Web que je vois ont des coins arrondis directement générés à l'aide de CSS3. IE., soyons têtus.

En utilisant CSS3, vous pouvez spécifier que les quatre coins sont arrondis, ou qu'un certain coin est arrondi, ce qui est très pratique. Le code est le suivant :

#round {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius: 10px;     
    -webkit-border-radius: 10px;     
    color:#fff;     
}     

#indie {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius-topright: 10px;     
    -moz-border-radius-bottomright: 10px;     
    -webkit-border-top-left-radius: 10px;     
    -webkit-border-bottom-left-radius: 10px;     
    color:#fff;     
}

<.>

Bordure arrondie

Coins partiellement arrondis< ; /h1>

Obtenir des coins arrondis sans utiliser border-radius
En CSS3, vous pouvez facilement définir des coins arrondis en utilisant l'attribut border- radius Rectangle, mais cet attribut n'est pas pris en charge dans IE8 et versions antérieures. Afin d'obtenir un rectangle arrondi adaptatif largeur-hauteur dans les anciennes versions des navigateurs, les trois méthodes suivantes peuvent être utilisées.

1. Utilisez l'image d'arrière-plan pour créer des coins arrondis.

Utilisez l'image d'arrière-plan pour créer un rectangle arrondi avec une largeur et une hauteur adaptatives. Tout d'abord, vous devez découper. 4 images aux coins arrondis. Placez ensuite les quatre images aux coins arrondis sur les quatre coins du rectangle et le tour est joué. Cela nécessite un total de 5 balises p, 1 conteneur p et 4 p de fond aux coins arrondis. Est-ce facile à comprendre ?

En termes de mise en œuvre spécifique, certains détails doivent être pris en compte. Pour un conteneur rectangulaire p :

La taille du rembourrage supérieur et inférieur est fixée au moins à la hauteur des coins arrondis.

la position est définie sur le positionnement relatif.
Placer du contenu.
Pour 4 p d'arrière-plan aux coins arrondis :

Définissez respectivement chaque image d'arrière-plan aux coins arrondis.

Absolument positionné aux quatre coins du rectangle du conteneur.
Vous devez définir les valeurs de largeur et de hauteur pour afficher l'image d'arrière-plan.
Supposons que la largeur et la hauteur de l'image arrondie soient de 5 pixels, le code spécifique est le suivant :

<p class="content">
    <p class="top-left"></p>
    <p class="top-right"></p>
    <p class="btm-left"></p>
 <p class="btm-right"></p>
</p>

.content {   
 position: relative;   
 padding: 5px;   
}   
.top-left,   
.top-rightright,   
.btm-left,   
.btm-rightright {   
 position: absolute;   
 width: 5px;   
 height: 5px;   
}   
.top-left {   
 top: 0;   
 left: 0;   
 background: url(imgs/top-left.png) no-repeat top left;   
}   
.top-rightright {   
 top: 0;   
 rightright: 0;   
 background: url(imgs/top-rightright.png) no-repeat top left;   
}   
.btm-left {   
 bottombottom: 0;   
 left: 0;   
 background: url(imgs/btm-left.png) no-repeat top left;   
}   
.btm-rightright {   
 bottombottom: 0;   
 rightright: 0;   
 background: url(imgs/btm-rightright.png) no-repeat top left;   
}

2. Production CSS p pure Rectangle arrondi

Le principe de cette méthode est d'utiliser des points de pixels pour dessiner des arcs afin de simuler des coins arrondis. Par souci de simplicité, j'utilise ici un exemple avec un rayon de coin de 3px, dans lequel la couleur d'arrière-plan du rectangle arrondi est rose et la bordure du rectangle est noire. Le coin arrondi du coin supérieur gauche est agrandi comme le montre la figure ci-dessous :

Ici, les côtés supérieur et inférieur du rectangle ont besoin de 3 p d'une hauteur de 1px et disposés verticalement ensemble pour simuler les coins arrondis. L'implémentation spécifique est la suivante :

Le premier p est la bordure supérieure noire du rectangle dans l'image ci-dessus. Étant donné que le rayon du coin simulé est de 3 px, les marges gauche et droite du p sont définies sur 3 px, et la couleur d'arrière-plan est définie sur noir.

Les marges gauche et droite du deuxième p sont définies sur 2px, les bordures gauche et droite sont des lignes noires de 1px et la couleur d'arrière-plan est rose.
Les marges gauche et droite du troisième p sont définies sur 1px, les bordures gauche et droite sont des lignes noires de 1px et la couleur d'arrière-plan est rose.
Les deux coins arrondis sous le rectangle arrondi sont les trois p ci-dessus disposés dans l’ordre inverse.
Le p de la zone de contenu rectangulaire n'a besoin que de définir les bordures gauche et droite et la couleur d'arrière-plan.
Le code spécifique est le suivant

<p class="wrapper">
    <p class="r1"></p>
 <p class="r2"></p>
 <p class="r3"></p>
 <p class="content">aaaaa</p>
 <p class="r3"></p>
 <p class="r2"></p>
 <p class="r1"></p>
</p>

.r1 {   
 height: 1px;   
 margin: 0 3px;   
 background-color: #111;   
}   
.r2 {   
 height: 1px;   
 margin: 0 2px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.r3 {   
 height: 1px;   
 margin: 0 1px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.content {   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}

Analyse des avantages et inconvénients de cette méthode :

Est-ce que n'utilise pas d'images d'arrière-plan et réduit le nombre de requêtes HTTP.

La maintenance ultérieure est bonne, mais à mesure que les pixels du rectangle arrondi augmentent, le code p dénué de sens augmentera de façon exponentielle.
Le rectangle arrondi implémenté a des limites.
Seuls les coins arrondis de couleur unie peuvent être obtenus.

3. Utilisez CSS border pour dessiner un trapèze afin de simuler des coins arrondis

En définissant l'attribut border, vous pouvez obtenir des trapèzes et des triangles. :

Lorsque vous définissez une valeur de largeur relativement grande pour les quatre bordures de p, vous pouvez obtenir quatre trapèzes, comme le premier motif de l'image ci-dessus

Sur cette base ; , lorsque vous définissez p Une fois que la valeur de hauteur de p est définie sur 0, vous pouvez obtenir un trapèze et un triangle isocèle, comme indiqué dans le deuxième motif de l'image ci-dessus
Lorsque la largeur et la hauteur de p sont définies sur ; 0, et seuls le haut et la gauche sont définis. Lorsque vous définissez une bordure, vous pouvez obtenir deux triangles rectangles, ce qui est le cas du troisième motif de l'image
Sur cette base, définissez la couleur d'une des bordures ; à transparent, et vous pouvez obtenir quelque chose comme le quatrième motif. Vous obtenez également un triangle rectangle.
Le code est le suivant :

<p class="box1"></p>
<p class="box2"></p>
<p class="box3"></p>
<p class="box4"></p>

.box1 {   
 height: 20px;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box2 {   
 height: 0;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box3 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid yellow;   
}   
.box4 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid transparent;   
}

已经知道了如何通过 border 画出梯形了，那又该如何利用梯形模拟圆角矩形呢？很简单，只要在矩形的上面和下面各放上一个梯形，就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦，直接上效果图：

具体代码如下：

<p class="wrapper">
    <p class="top"></p>
 <p class="content">
     <p>利用border画出梯形，模拟圆角</p>
 </p>
 <p class="bottom"></p>
</p>

p {   
 box-sizing: border-box;   
}   
.top {   
 height: 0;   
 border-top: 3px solid transparent;   
 border-bottom: 3px solid #111;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.bottombottom {   
 height: 0;   
 border-top: 3px solid #111;   
 border-bottom: 3px solid transparent;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.content {   
 color: #fff;   
 background-color: #111;   
}   
.wrapper {   
 width: 200px;   
 margin: 0 auto;   
}

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!