Parfois vous avez juste déplacer un élément, changer le point de vue, pour résoudre un problème semble insurmontable. Quand on a à faire avec la compatibilité entre les navigateurs et les CSS, en inventant des solutions "spectaculaire" (cascades dirais) est à l'agenda. , per Safari e Google Chrome. Qu'est-ce que je vous montre une manière facile d'appliquer les coins arrondis des images en utilisant -moz-border-radius , qui est disponible pour Mozilla Firefox et -webkit-border-radius , Safari et Google Chrome.
Normalement, ces attributs CSS sont appliquées à des conteneurs tels que div :
1 2 3 4 5 6 7 8 | div # box { 100px ; width: 100px; 100px ; hauteur: 100px; ; -Moz-border-radius: 16px; ; -Webkit-border-radius: 16px; #eee ; background: # eee; 1px solid #666 ; border: solid 1px # 666; } |
Avec le code HTML comme ceci:
Obtention:
Voulant faire la même chose sur une photo, vous vous rendez compte que le résultat est partiellement fait! L'utilisation d'un CSS comme ceci:
1 2 3 4 5 6 | { # Img {border-rondes ; -Moz-border-radius: 8px; ; -Webkit-border-radius: 8px; #eee ; background: # eee; 1px solid #666 ; border: solid 1px # 666; } |
Sur un formatage HTML comme ceci:
1 | "round-border" src = "images/undolog.png" alt = "Round Image Test" / > < img id = "round-frontière" src = "images / undolog.png" alt = "Round image test" /> |
Safari et Google Chrome bien répondre:
Alors que FireFox montrant surprenant:
Comme vous pouvez le voir sur le screenshot ci-dessus, FireFox 3.5.7 sur le bord "arrondis" mais l'image semble être resté carré!
Un dispositif simple - utile dans des cas précis - vous permet de facilement résoudre le problème:
1 2 3 4 5 6 | div # box { ; -Moz-border-radius: 8px; ; -Webkit-border-radius: 8px; url ( http://dominio.com/images/undolog.png ) no-repeat ; background: url (http://dominio.com/images/undolog.png) no-repeat; 1px solid #666 ; border: solid 1px # 666; } |
– impostando il suo sfondo con l'immagine che vogliamo visualizzare con i bordi arrotondati. Dans la pratique, au lieu d'utiliser directement la balise img , nous utilisons un récipient quelconque - dans ce cas un div - l'établissement de ses antécédents avec l'image que nous voulons voir avec les bords arrondis.
Cette solution a évidemment un certain nombre d'inconvénients:
- ), di conseguenza nel DOM html non esiste nessuna immagine, il ché significa che eliminando i fogli di stile la nostra immagine scompare Nous avons perdu la balise
img(avec son attributalt), donc il n'ya pas de html dans l'image DOM, ce qui signifie que l'élimination des feuilles de style de notre image disparaît - Ayant pour définir un conteneur (dans notre cas un
div) en utilisant des feuilles de style, nous devons connaître sa taille au début
Comme je l'ai écrit plusieurs fois sur ce blog serait tout cas que le «standard» CSS (2 ou 3 qui est) de changer son nom de "chacun fait ce qu'il veut" ...
lol
Rien n'est plus vrai et le plus triste est que le CSS 3 «séparation» est en augmentation. D'autre part je ne donnerais pas tout le blâme sur les créateurs du navigateur, certaines normes établies par le W3C sont très vagues.