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 :
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 spécifier qu'un certain coin est arrondi. Pour les 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.