设置边框最常使用border，比如这样：
border: 1px dashed #333;
这是最常规的方法了，今天再来说说其他两种方法，
- outline方式
- background方式
outline方法
这也算是一种比较常规的方法了，
outline: 1px solid;
但需要注意的是，outline是在容器的最外部，与border的渲染还是有点区别的，同时对比下：
border: 1px dashed #333;
outline: 1px solid;
外部实线是outline，内部虚线是border，为了一致，可以设置outline-offset往内缩一点：
outline-offset: -1px;
background方法
这是本文的重点，我也是刚get到此项技能，之前一直不知道background居然如此强大，直接上代码：
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;
这里我们只设置了上面看，而且还是虚线的，做一说明这种方式的强大，再把其他边框补上去：
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
#ffffff;
可见，使用background非常的灵活，边框的位置可以任意调整