All Articles Web
Création coins arrondis sur Objets mise en CSS3
Geoff Blake on Thu, April 21st | 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

Si vous n'avez pas fait beaucoup de lecture encore levé sur ce qui est nouveau dans CSS3 , c'est assez impressionnant. Il ya toutes sortes de possibilités nouvellement introduites, notamment des dégradés, des colonnes multiples, les images des frontières, et que nous allons parler un coup d'oeil ici, rayon de la frontière,. Rayon des frontières nous permet de mettre des coins arrondis sur les autres objets rectangulaires dans nos mises en page Web.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Etape 1 - Appliquer un rayon de CSS3 Border

Tout d'abord, nous allons appliquer le rayon frontière. Dans votre feuille de style, trouver la règle que vous souhaitez appliquer l'effet de coin arrondi à. Souvent, ce sera un sélecteur d'ID qui contrôle un élément div. Assurez-vous aussi que vous êtes également appliquer une couleur de fond ou une bordure (ou deux) de sorte que vous pouvez voir les coins!

Ensuite, ajoutez le "rayon de la frontière" propriété pour votre règle, suivie par une valeur. Plus la valeur que vous utilisez, plus arrondi du coin.

Ici, je suis d'appliquer le rayon frontière pour mon # contenu sélecteur d'ID, qui est le contrôle de la div qui détient contenu de ma page, comme vous pouvez le voir dans la capture d'écran inclus. Assurez-vous d'enregistrer votre travail et vérifier votre travail dans votre navigateur.

Si vous obtenez toujours 90 degrés, alors votre navigateur est celui qui ne prend pas en charge cette fonctionnalité. Mais ne mettez pas les choses dans l'instant. Nous allons vérifier que le truc cool je l'ai mentionné plus tôt.

Étape 2 - Assurer l'effet de coin arrondi Travaux

Comme mentionné précédemment, seules les dernières versions des navigateurs populaires de soutien de propriété CSS3 la frontière rayon. Alors, comment pouvez-vous vous assurer que votre configuration fonctionne pour les utilisateurs qui utilisent encore les navigateurs qui sont une version ou deux de retard? Vous pouvez utiliser du code supplémentaire, comme suit.

Tout d'abord, nous allons ajouter dans "-moz-border-radius:" suivi par une valeur de rayon. Cette cible ce qui est appelé les navigateurs Gecko - notamment FireFox.

Ensuite, nous allons ajouter dans "-webkit-border-radius:" suivi par la même valeur que nous avons utilisé ci-dessus. Ça va frapper tous les navigateurs basé sur WebKit, comme Chrome et Safari. Une fois ajouté, enregistrez votre travail et rafraîchissez votre navigateur.

Étape 3 - L'exception confirme la règle

Maintenant ce que sur Internet Explorer, le navigateur préféré tous les web designer (sic), demandez-vous? Eh bien, toutes les options ci-dessus ne fonctionnera pas. En fait, le code que nous avons ajouté à ce point sera tout simplement ignoré par Explorer, et les coins seront simplement rendre à leur défaut de 90 degrés de style, qui est mieux que d'avoir le casser, non?! Il est possible de retirer des coins arrondis dans IE, mais sachez que c'est un peu de travail supplémentaire, et peut-être que c'est quelque chose que nous pourrions entrer dans une pointe de l'avenir. Pour le moment, cependant, profitez de votre coins arrondis dans tous les autres navigateurs!

CSS est merveilleux. Découvrez plus sur la conception flottante mises en page CSS .


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: