css边框的最简方式（CSS设置边框的几个技巧）

css边框的最简方式（CSS设置边框的几个技巧）现在我们已经掌握这几方式，但本文的重点是上面这种，我们现在来动手操练下：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非常的灵活，边框的位置可以任意调整。bor

设置边框最常使用border，比如这样：

border: 1px dashed #333;

这是最常规的方法了，今天再来说说其他两种方法，

1. outline方式
2. 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非常的灵活，边框的位置可以任意调整。

现在我们已经掌握这几方式，但本文的重点是上面这种，我们现在来动手操练下：

渐变边框

background: linear-gradient(90deg #29bdd9 0% #276ace 100%) repeat-x 0 0/100% 5px linear-gradient(-90deg #29bdd9 0% #276ace 100%) repeat-x 0 100%/100% 4px linear-gradient(180deg #29bdd9 0% #276ace 100%) repeat-y 0 0/4px 100% linear-gradient(0deg #29bdd9 0% #276ace 100%) repeat-y 100% 0/4px 100% #eee;

滚动虚线边框

.box { background: linear-gradient(90deg #333 50% transparent 0) repeat-x linear-gradient(90deg #333 50% transparent 0) repeat-x linear-gradient(0deg #333 50% transparent 0) repeat-y linear-gradient(0deg #333 50% transparent 0) repeat-y; background-size: 4px 1px 4px 1px 1px 4px 1px 4px; background-position: 0 0 0 100% 0 0 100% 0; } .box:hover { animation: linearGradientMove .3s infinite linear; } @keyframes linearGradientMove { 100% { background-position: 4px 0 -4px 100% 0 -4px 100% 4px; } }

滚动渐变

.box { background: linear-gradient(90deg #FF8235 #30E8BF #FF8235) repeat-x linear-gradient(90deg #FF8235 #30E8BF #FF8235) repeat-x linear-gradient(0deg #FF8235 #30E8BF #FF8235) repeat-y linear-gradient(0deg #FF8235 #30E8BF #FF8235) repeat-y; background-size: 100% 8px 100% 8px 8px 100% 8px 100%; background-position: 0 0 0 100% 0 0 100% 0; } .box:hover { animation: linearGradientMove 1s infinite linear; } @keyframes linearGradientMove { 100% { background-position: 200px 0 -200px 100% 0 -200px 100% 100px; } }

以上就是设置边框的几个小技巧。

参考：
https://www.cnblogs.com/coco1s/p/14291567.html