我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

最近在还原设计稿的过程中，遇到一个需求，将边框设置为两种固定的颜色，设计稿大概就长这样。👇

一、思路

首先我们很容易想到使用linear-gradient实现，毕竟八股文之如何使用CSS实现三角形有手动实现过很多次，其中一种方法是可以让渐变色设置成两种固定的颜色，然后将其中一个颜色设置为透明即可~ 那就正好带大家复习一下八股文吧~🕵️

  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, brown, brown 50%, lightblue 50%, lightblue 100%);

将浅蓝色设为透明：

  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, brown, brown 50%, transparent 50%, transparent 100%);

二、行动起来

上面我们已经使用linear-gradient成功在盒子背景上设置了两种固定的颜色，我们试试将它应用在我们的边框上吧，let's do it!

  width: 200px;
  height: 200px;
  background: gray;
  border-left: 2px solid linear-gradient(45deg, brown, brown 50%, lightblue 50%, lightblue 100%);

可是，居然没有生效欸，就很烦👳‍♂️

这时候，就需要查看MDN文档了，由于我们上面用的是简写写法，我们应该去找border-color，我们可以在文档中可以看到它的取值为color。

这里有个链接，我们点开瞅瞅，不瞅不知道，一瞅吓一跳，居然还有CSS数据类型。

后面查看文档知道原来还有这么多种CSS数据类型！是我才疏学浅了！

• <angle>
• <basic-shape>
• <blend-mode>
• <color>
• <custom-ident>
• <filter-function>
• <flex>
• <frequency>
• <gradient>
• <image>
• <integer>
• <length>
• <number>
• <percentage>
• <position>
• <ratio>
• <resolution>
• <shape-box> (en-US)
• <single-transition-timing-function> (en-US)
• <string>
• <time>
• <transform-function>
• <url>

我们也找到了<gradient>数据类型，原来是数据类型不通的原因，所以不能应用在border-color上面。

难道在边框上不能使用渐变嘛，正当我想去尝试别的实现方案时，我突然看到了MDN对<gradient>数据类型的描述是：

<gradient>  是一种<image>CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。

嗯哼😏，<image> CSS数据类型的子类型，我突然想到border-image这个属性，或许可以在这上面试试呢，说干就干，border-image: ,ctrl + x, ctrl + v, ctrl + s, alt + tab, F5。

 width: 200px;
  height: 100px;
  background: gray;
  border-left: 4px solid ;
  border-image: linear-gradient(45deg, brown, brown 50%, lightblue 50%, lightblue 100%);

一顿操作猛如虎，一看效果零杆五，还是没生效，人麻了。👻

继续看MDN对border-image的解释吧，我看下来是有点懵的，好像说了又好像啥也没说，最后收集资料，总算对border-image属性有了更深刻的认识，推荐大家看一下张鑫旭大大的这篇文章CSS3 border-image详解、应用及jQuery插件。 经过一番折腾终于搞定了！🤔 这里实现了两种分层颜色，如果想设置多种的话可以在linear-gradient上修改即可~

  width: 200px;
  height: 100px;
  background: gray;
  border-left: 4px solid ;
  border-image: linear-gradient(0deg, brown, brown 50%, lightblue 50%, lightblue 100%) 2 2 2 2;

在线运行地址可见： 码上掘金

最后

本文介绍了border以及linear-gradient相关的知识点的，我们学会了如何绘制三角形和生成花哨的边框~
如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
笔者还有其他专栏，欢迎阅读~
Vue从放弃到入门
深入浅出JavaScript