Aujourd'hui, nous apprenons à utiliser la technologie CSS3 pour obtenir des coins arrondis sans avoir besoin d'images. Nous pouvons utiliser CSS3 pour obtenir l'effet de coin arrondi de l'arrière-plan du titre de la barre latérale et l'effet de coin arrondi du champ de recherche. Enregistrez-le pour une utilisation ultérieure. Le W3C a depuis longtemps formulé la propriété CSS3 qui implémente les coins arrondis CSS : border-radius Firefox et Safari implémentent également cette fonction via des propriétés privées :
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox et Safari implémentent des coins arrondis< /div>
L'effet est le suivant :
Parmi eux, -moz-border-radius est une propriété privée utilisée par Firefox pour implémenter des coins arrondis, et -webkit-border-radius est une propriété privée utilisée par les principaux navigateurs Webkit (tels que Safari et Chrome) pour implémenter des coins arrondis. il vous suffit de préciser qu'un certain coin est arrondi. Quant aux angles, ils définissent tous quatre attributs :
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Bien entendu, IE (y compris IE8) ne le prend toujours pas en charge, l'effet ne peut donc être visualisé que dans Firefox, Safari et Chrome.