Explication détaillée de quelques exemples de codes d'utilisation des propriétés Border en CSS3

Il existe trois propriétés liées à Border en CSS3 : arrondi border-radius, picture border border-image et multi-color border border-color. Parmi elles, arrondi border-radius est une propriété couramment utilisée, et elle est utilisée. sur de nombreux sites Web, Border-radius est désormais utilisé pour créer des coins arrondis.

 /*我们可以分别给各边上色*/
  border-top-color: <color>/*给上边框上色*/
  border-right-color: <color> /*给右边框上色*/
  border-bottom-color:<color> /*给下边框上色*/
  border-left-color: <color> /*给左框上色*/

Ce qui précède montre comment colorer la bordure d'un élément. Tout le monde sait que cela peut donner à la bordure une couleur unique. Mais si nous voulons ajouter différentes couleurs à la bordure, par exemple ajouter une couleur dégradée à la bordure, ou une couleur, alors notre méthode précédente ne peut rien faire, alors que devons-nous faire pour obtenir un tel effet, CSS3 ? a introduit d'autres méthodes. Son propre attribut border-color, mais jusqu'à présent, seuls les navigateurs Firefox 3.0+ prennent en charge cet attribut. C'est aussi pour cette raison que l'application de la couleur de bordure CSS3 est assez rare. À ma connaissance, il n'existe aucun projet qui utilise la couleur de bordure de CSS3 pour obtenir des effets de bordure spéciaux. Mais cela n’affectera pas l’enthousiasme de nous, passionnés de CSS3, à apprendre les différentes propriétés de CSS3. Continuons ci-dessous et voyons comment utiliser le borderder-color de CSS3.

Jetons un coup d'œil aux règles d'écriture de sa grammaire

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
  -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
  -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
  -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

À partir des règles de grammaire ci-dessus, nous écrivons les quatre côtés de l'élément séparément, mais il y a une différence de CSS2 La différence est que dans CSS3 nous utilisons border-top-colors, border-right-colors, border-bottom-colors, border-left-colors, où les couleurs sont un nombre pluriel, mais en CSS2 elles sont toutes border-top - couleur, couleur de la bordure droite, couleur de la bordure inférieure, couleur de la bordure gauche. Tout le monde doit s'en souvenir. En CSS3, c'est "colors"

Lorsque vous utilisez la propriété border-color de CSS3, si la largeur de votre bordure est définie sur X px, alors vous pouvez utiliser X sur les couleurs de bordure, chaque couleur est un px à ce moment. Si la largeur de votre bordure est définie sur 10 px et que vous n'utilisez que trois ou quatre couleurs, la dernière couleur remplira la largeur derrière elle.

.demo {   
    width: 200px;
   height: 100px;
   border: 5px solid transparent;
   -moz-border-top-colors: red blue white white black;
   -moz-border-right-colors: red blue white white black;
   -moz-border-bottom-colors: red blue white white black;
   -moz-border-left-colors: red blue white white black;       
 }

Vous pouvez également utiliser cet attribut pour créer un effet de bordure dégradée

.demo1 {    
      width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

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!