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

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

CSS怎么设置同侧边框两种分层色彩

一、思路

首要咱们很简单想到运用linear-gradient完成，究竟八股文之怎么运用CSS完成三角形有手动完成过很屡次，其中一种方法是能够让渐变色设置成两种固定的色彩，然后将其中一个色彩设置为通明即可~ 那就正好带咱们复习一下八股文吧~️

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

CSS怎么设置同侧边框两种分层色彩
将浅蓝色设为通明：

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

CSS怎么设置同侧边框两种分层色彩

二、行动起来

上面咱们现已运用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%);

CSS怎么设置同侧边框两种分层色彩
但是，竟然没有收效欸，就很烦‍♂️

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

CSS怎么设置同侧边框两种分层色彩
这儿有个链接，咱们点开瞅瞅，不瞅不知道，一瞅吓一跳，竟然还有CSS数据类型。

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;

CSS怎么设置同侧边框两种分层色彩
在线运行地址可见：

最后

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