css 设置边框(css+div设置边框)

设置边框最常使用边框，比如这样：
1px虚线# 333;这是最常规的方法了，今天再来说说其他两种方法，
概述方式背景方式概述方法这也算是一种比较常规的方法了，
大纲： 1px固体；但需要注意的是，大纲是在容器的最外部，与边界的渲染还是有点区别的，同时对比下：
1px虚线# 333;大纲： 1px固体；外部实线是大纲，内部虚线是边框，为了一致，可以设置轮廓偏移往内缩一点：
轮廓偏移：-1px；背景方法这是本文的重点，我也是刚得到到此项技能，之前一直不知道背景居然如此强大，直接上代码：
背景：线性渐变(90度，#333 50%,透明0)重复-x 0 0px/9px 1px，# ffffff这里我们只设置了上面看，而且还是虚线的，做一说明这种方式的强大，再把其他边框补上去：
背景：线性渐变(90度，#333 50%,透明0)重复-x 0 0px/9px 1px，线性渐变(90度，#333 50%,透明0)重复-x 0 100%/9px 1px，线性渐变(0度，#333 50%,透明0)重复-y 0/1px 9px，线性渐变(0度，#333 50%,透明0)重复-y 100% 0px可见，使用背景非常的灵活，边框的位置可以任意调整。现在我们已经掌握这几方式，但本文的重点是上面这种，我们现在来动手操练下：
渐变边框背景：线性梯度(9 0度，#29bdd9 0%，#276ace 100%)重复-x 0 0/100% 5px，线性梯度(-90度，#29bdd9 0%，#276ace 100%)重复-x 0 100%/100% 4px，线性梯度(180度，#29bdd9 0%，#276ace 100%)重复-y 0/4px 100%滚动虚线边框方框{背景：线性渐变(90度，#333 50%，透明0)重复x，线性梯度(90度，#333 50%，透明0)重复x，线性梯度(0度，#333 50%，透明0)重复y，线性梯度(0度，#333 50%，透明0)重复-y；background-size: 4px 1px，4px 1px，1px 4px，1px 4px；背景位置： 0 0,0 100%,0 0,100% 0。} .框：悬停{ animation : linearGradientMove。3s无限线性；} @关键帧linearGradientMove { 100% { background-position : 4px 0，-4px 100%，0 -4px，100% 4px；}}滚动渐变方框{ background:线性渐变(90度，#FF8235，#30E8BF，#FF8235)重复x，线性渐变(90度，#FF8235，#30E8BF，#FF8235)重复x，线性渐变(0度，#FF8235，#30E8BF，#FF8235)重复y，线性渐变(0deg，#FF8235，#30E8BF背景尺寸： 100% 8px，100% 8px，8px 100%，8px 100%；背景位置： 0 0,0 100%,0 0,100% 0。} .box : hover { animation : linearGradientMove 1s无限线性；} @关键帧linearGradientMove { 100% { background-position : 200 px 0，-200px 100%，0 -200px，100% 100px；}}以上就是设置边框的几个小技巧。参考：https://www。cn博客。com/coco 1s/p/14291567。超文本标记语言