2019-05-16 CSS3的border-image左右边框消失

CSS3的border-image

今天在写页面的时候用到了css3的border-image属性，之前一直没有注意过这个问题，导致今天页面效果有差异：

理想中的样子：

TIM图片20190516092229.png

嗯，一个渐变的边框线。

实际的样子：

TIM图片20190516092418.png

嗯，渐变是有了。but，左右边框哪里去了。
于是赶快检查代码哪里写的不对，

  height: 35px;
  line-height: 35px;
  margin-bottom: 3px;
  font-size: 20px;
  color: #6EBDFF;
  text-align: center;
  background: rgba(9, 76, 138,.6);
  border: 2px solid;
  border-image:linear-gradient(to bottom,#2C95EE,#045FAD) 30 30 ;

嗯，逐行检查，嗯，没有语法错误。然后调一下属性看看吧，height加高以后...

TIM图片20190516093011.png

什么鬼！height？搞得我一脸蒙蔽...
本着科学开发的信念，我，认为这是不对滴，但至少有关系，于是先不管它，那么最有问题的就是border-images的两个30在捣鬼。
说实话我也不知道这是什么意思（百度大法好，粘贴一时爽）。
W3c了解一下，嗯有点明白了。大概就是下边这样：
两个30对应的属性呢就是border-image-slice，这个属性的话是用来分解引入进来的背景图片。
其取值支持: | 其中number是没有单位的，专指像素px，因为其默认的单位就是像素px，所以在使用number时不需要加上单位，如果加上了单位反而是错误的写法。
另外我们除了直接用nuember来设置外，我们还可以使用百分比值来表示，百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小，如图所示：

border-image-slice.jpg

所以对应我的问题就显而易见了，height太低，border-image-slice太高，截取到图外边去咯。所以呢，把border-image-slice调低就好了，多低呢？上下高度加一起不能超过你容器的height。嗯，真相水落石出。

告辞