테두리 색상 그라데이션 효과

코드는 다음과 같습니다.

<!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 실선은 테두리에 8픽셀의 실선(실선)을 나타내며 색상은 검정색입니다

-moz-border -bottom-colors: (아래쪽)

테두리 너비를 Xpx로 설정하면 이 테두리에 X 색상을 사용할 수 있으며 각 색상은 1px 너비를 표시합니다. 테두리의 너비가 10픽셀이지만 5~6가지 색상만 선언하면 마지막 색상이 나머지 너비에 추가됩니다.

효과 표시:

微信图片_20180314154934.png