Maison > interface Web > tutoriel CSS > Moz Border-Radius (propriété CSS)

Moz Border-Radius (propriété CSS)

Joseph Gordon-Levitt
Libérer: 2025-02-26 10:06:15
original
910 Les gens l'ont consulté

moz-border-radius (CSS property)

Moz Border-Radius (propriété CSS)

Moz-Border-Radius était l'équivalent de Gecko à la propriété Border-Radius de CSS3, bien qu'il différait à quelques égards. La propriété raccourci a permis aux développeurs Web de spécifier les frontières arrondies, ou les arrière-plans arrondis si aucune frontière n'a été définie.

dans Gecko 2.0 Moz-Border-Radius a été renommé Border-Radius; -Moz-Border-Radius a été soutenu comme un alias jusqu'à Gecko 12.0.

Afin de se conformer à la norme CSS3, Gecko 2.0

  • a modifié la gestion des valeurs pour correspondre à la spécification. Vous pouvez spécifier une ellipse comme frontière sur un élément de taille arbitraire juste avec Border-Radius: 50%;
  • Corners arrondi Corners Clip Content et Images (Si débordement: Visible n'est pas défini)

    Remarque: La prise en charge de la version préfixée (-moz-border-radius) a été supprimée dans Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / Seamonkey 2.10).

    Border-Radius

    La propriété Border-Radius est une propriété raccourci qui peut accepter jusqu'à quatre valeurs. Les valeurs représentent (dans l'ordre) les coins supérieur gauche, haut-droit, inférieur droit et inférieur gauche. Comme c'est le cas avec toutes les propriétés raccourcis qui utilisent des valeurs unitaires, toutes les valeurs omises sont héritées de celles existantes.

    Vous pouvez cibler explicitement les coins individuels d'un élément en utilisant la syntaxe à la main. Par exemple:

    .media img {
      border-top-left-radius: 20%;
      border-top-right-radius: 20%;
      border-bottom-right-radius: 20%;
      border-bottom-left-radius: 20%;
    }
    Copier après la connexion

    Vous pouvez voir clairement pourquoi, dans la plupart des cas, vous utiliserez la syntaxe du sténographie. Même si vous souhaitez cibler un seul coin, il est beaucoup plus efficace de le faire à la place:

    .media img {
      border-radius: 20% 0 0 0;
    }
    Copier après la connexion

Questions fréquemment posées (FAQ) sur -moz-border-radius CSS Property

Quelle est la propriété CSS -moz-Border-Radius utilisée pour?

La propriété CSS -moz-Border-Radius est une propriété spécifique à Mozilla utilisée pour créer des coins arrondis sur des éléments HTML. Il vous permet de spécifier le rayon de la courbe de la frontière, vous donnant le contrôle de la rondeur des coins. Cette propriété est particulièrement utile dans la conception Web pour créer des boutons, des cartes ou tout autre élément qui bénéficient d'avoir des coins arrondis.

La propriété -moz-border-radius est-elle toujours nécessaire?

La -Les propriétés de la Radius-Radius ont été initialement utilisées pour les navigateurs de Firefox car ils n'ont pas soutenu la propriété standard de la radius frontalière. Cependant, depuis Firefox 4.0 et à partir, la propriété standard de la radius frontalière est pleinement prise en charge. Par conséquent, l'utilisation de -moz-fronts-radius n'est plus nécessaire à moins que vous ne développiez pour des versions plus anciennes de Firefox.

Comment fonctionne la propriété -moz-frontraire-radius?

La propriété -moz-border-radius fonctionne en acceptant une ou deux valeurs qui définissent les rayons d'une ellipse quart qui définit la forme de la forme de la forme de la forme de la forme de la forme de la forme de la forme de la forme de coin du bord de la frontière extérieure. La première valeur est le rayon horizontal, et le second est le rayon vertical. Si une seule valeur est donnée, elle est utilisée pour les deux rayons.

Puis-je utiliser des pourcentages avec la propriété -moz-frontraire-radius?

Oui, vous pouvez utiliser des pourcentages avec le -moz - Propriété Border-Radius. Le pourcentage est calculé par rapport à la largeur et à la hauteur de la boîte de bordure, et la forme résultante est une ellipse symétrique, ou un cercle si les deux longueurs sont égales.

Quelle est la différence entre -moz-border -Radius et Border-Radius?

Le -moz-border-radius est une propriété spécifique au fournisseur utilisé dans les anciennes versions de Firefox, tandis que Border-Radius est la norme Propriété CSS. Les deux propriétés servent le même objectif, qui est de créer des coins arrondis. Cependant, il est recommandé d'utiliser la propriété standard Border-Radius car elle est prise en charge par tous les navigateurs modernes.

Comment puis-je créer un cercle à l'aide de la propriété -moz-frontraire-radius?

pour créer Un cercle utilisant la propriété -moz-border-radius, vous devez régler la propriété à 50%. Cela créera un cercle parfait, étant donné que l'élément a une largeur et une hauteur égales.

Puis-je utiliser différentes valeurs pour chaque coin avec la propriété -moz-fronde peut spécifier différentes valeurs pour chaque coin en utilisant le -moz-frontrand-radius-topleft, -moz-frontraire-radius-topright, -moz-fronde-radius-bottomright, et -Moz Propriétés du Radius-Bottomleft.

Que se passe-t-il si j'utilise des valeurs négatives avec la propriété -moz-frontraire-radius?

Les valeurs négatives ne sont pas autorisées avec la frontière -moz -Radius propriété. Si vous utilisez une valeur négative, la déclaration sera ignorée et la propriété ne sera pas appliquée.

Puis-je utiliser la propriété -moz-fronder-radius avec d'autres propriétés de bordure?

Oui, oui, La propriété -moz-frontraire-radius peut être utilisée en conjonction avec d'autres propriétés frontalières telles que le style frontalier, la largeur des frontières et la couleur de la frontière. Cela vous permet de créer une variété de styles pour vos coins arrondis.

La propriété -moz-border-radius est-elle prise en charge dans tous les navigateurs?

La propriété -moz-border-radius est une propriété est une propriété Propriété spécifique à Mozilla, elle n'est donc soutenue que dans Firefox. Cependant, tous les navigateurs modernes prennent en charge la propriété standard de Border-Radius, il est donc recommandé de l'utiliser à la place pour la compatibilité des navigateurs.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal