Border color gradient effect

The code is as follows:

<!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 represents the solid border of 8 pixels Line (solid) color is black

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

The border is set The width is X px, then you can use X colors on this border, each color showing a width of 1px. If say your border is 10 pixels wide but only declares 5 or 6 colors, then the last color will be added to the remaining width.

Show results:

Continuing Learning

new file

<?php echo "边框颜色渐变效果";

submit Reset Code

Automatic operation

Border color gradient effect

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]