边框颜色渐变效果

代码如下:

<!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表示边框8像素的实线(solid) 颜色为黑

-moz-border-bottom-colors:(向下)

设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。

效果展示:

微信图片_20180314154934.png

继续学习
||
<?php echo "边框颜色渐变效果";
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载
课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~