Effet dégradé de couleur de bordure

Le code est le suivant :

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Border-color</title>
   </head>
   <body>
      <div style="border: 8px solid #000;
      -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
      -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
      -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
      -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
      padding: 5px 5px 5px 15px;">
         在Firefox浏览器里能看到边框颜色渐变效果
      </div>
   </body>
</html>

border:

8px solid représente une ligne continue de 8 pixels dans la bordure (solide) et la couleur est noire

-moz-border -bottom-colors : (Down)

Définissez la largeur de la bordure sur X px, vous pouvez ensuite utiliser X couleurs sur cette bordure, chaque couleur affichant une largeur de 1 px. Si, par exemple, votre bordure mesure 10 pixels de large mais ne déclare que 5 ou 6 couleurs, alors la dernière couleur sera ajoutée à la largeur restante.

Affichage de l'effet :

微信图片_20180314154934.png