css 用于创建多色边框的示例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 用于创建多色边框的示例相关的知识，希望对你有一定的参考价值。

<body>
<div id="box">
</div>
</body>
#box {
  margin: 40px auto;
  background-color:#3a3a3a;
  width: 50%;
  height: 50px;
  position: relative;}
#box:after {
  content: "";
  position: absolute;
  left: 0px;
  right:0px;
  bottom: 0px;
  height: 7px;
  background-image: -webkit-linear-gradient(0deg, #F78181 40px, #BEF781 40px, #BEF781 70px,#58ACFA 70px, #58ACFA 100px, #9b59b6 100px,#9b59b6 130px,#BDBDBD 130px,#BDBDBD 160px,#F3F781 160px,#F3F781 190px,#58FAD0 190px,#58FAD0 220px,#FE642E 220px,#FE642E 250px,#DA81F5 250px,#DA81F5 280px,#886A08 280px,#886A08 310px,#088A29 310px,#088A29 340px);
  background-size: 340px;
}

以上是关于css 用于创建多色边框的示例的主要内容，如果未能解决你的问题，请参考以下文章

css 创建多色站点标题

条纹边框，如示例图像 css

CSS3

CSS/HTML：在输入字段周围创建发光边框

css 多色旋转器

CSS3 边框