一、项目需求
鄙人不才，最近做的项目中遇到一个小需求，就是实现一个有拐点的边框。这是个简单的需求，相信大家都实现过，可能你实现的样式是这样的,如下图红色边框中样式所示>>>>>
其实这些样式都大同小异，都可以通过简单的css样式去实现，相信聪明的同学看到这里已经有完美的解决方案了。我还记得我刚入职时候，最怕遇见这种样式，这真是令人头大，因为本人之前是做的后端，前端懂得不多，到了这个东家，才做起了前端，还别说，前端其实挺有意思的。到现在前前后后也学了点东西。懂的不多，写的不好，各位兄台不要见笑。
二、话不多说，直奔主题
还记得刚接触手这种小需求时，因为没有前端功底，所以就没想太多，上去就是一个干上一个div， 或者是干上一个span,然后慢慢的去调样式。 其实主要就是调整边界线的位置，不过后来随着干的多了，发现【卧槽！】老这样干也不行啊，得换种方式啊， 使用标签调位置是很恶心的，夸张点说是牵一发二动全身。 后来慢慢的学到了新方法，使用border-image+liner-gradient实现特殊的边框样式， 你还别说，真好使。比如图一所示的边界线咱们可以用以下代码实现(后文附github地址)
<div class="div1"></div>
<style>
width: 100px;
height: 100px;
border: 10px solid rgb(22, 233, 15);
border-image: linear-gradient(rgb(255, 0, 0),rgb(255, 255, 0)) 100 90 0 100;
border-right: none;
</style>
其实使用border-image确实是好使了很多，比用标签实现这种样式方便了很多。后来的很长一段时间，遇到这样的小需求，二话不说直接开干，border-image直接往上怼！直到有一天遇到了图二和图三的样式。【卧槽！】鄙人才疏学浅用一个border-image搞不定啊。要不然先实现效果，div,span标签往上怼？ 不可能！这不是一名优秀的前端工程师干的事！要干就要干一票大的（** 尽力寻找最优解 **）！ 于是乎background出场了！你没看错，就是那个不起眼的background。 图二的实现方式如下所示（后文附github地址）
<div class="div2"></div>
<style>
.div2 {
width: 200px;
height: 200px;
background:
linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 1%, transparent 1%, transparent 100%),
linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 100%);
background-size: 2px 100%;
background-repeat: no-repeat;
}
</style>
其实它的实现方式也离不开liner-gradient,看见渐变学好了，用武之地其实不会少。 图二和图三类似，但是现实方式有些许出入。可以看出图三是展开后的列表，左右两个小边框长度是一定的， 不能因为列表的伸展而拉伸变长，图二实现的代码，liner-grident中的百分比会造成列表高度变化时，左右两个边框高度会边长，因此我们可以用以下方式去实现图三的效果（后文附git地址）
<div class="div3"></div>
<style>
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat;
background-position: 0 0, 100% 0%, 100% 100%, 0 100%, 0 100%, 0 0;
background-size: 100% 2px, 2px 10px, 2px 10px, 100% 2px, 2px 10px, 2px 10px;
</style>
上面的方法可以解决高度变化导致的边框拉伸问题。但是还是不够完美，还有改善的空间。
三、小结
上面就是鄙人实现特殊边框样式的方法，这种方法肯定有很多，我这里不做赘述了。如果大家觉得上面的解决办法有用的话，欢迎【收藏】+【关注】,** 后面还会给大家分享一些开发中的小技巧 **
最后，给大家附上项目地址【里面有常用小技巧，欢迎查阅，记得给个start，不胜感激！】
github仓库
