css-点缀边框滚动效果

Easy-way是通过背景图片实现的。p必须垂直居中，还记得如何垂直居中吗？详见另一篇博客~.box{width:100px;高度：100px；位置：相对；背景：url(https://www.zhangxinxu.com/study/image/selection.gif)；p{位置：绝对;左：0；顶部：0；右：0；底部：0；保证金：自动；高度：计算（100%-2px）；宽度：计算（100%-2px）；背景色：#fff；}}repeating-linear-gradient135度重复线性渐变，p高度，白色背景覆盖外部div渐变。.box{宽度：100px；高度：100px；背景：重复线性渐变（135deg，透明，透明4px，#0004px，#0008px）；溢出：隐藏；//新建一个BFC，解决垂直方向margin问题Animation:move1sinfinitelinear;p{高度：计算（100%-2px）；边距：1px；背景色：#fff；}}@keyframes从{background-position:-1px;移动{}到{背景位置：-12px；}}linear-gradient&&background通过lineargradient和background-size画一条虚线，然后通过background-position向四边移动。这种方式的好处是可以分别设置四个边的样式和动画的方向。细心的同学应该会发现，前面方法中的动画不是顺时针也不是逆时针。.box{宽度：100px；高度：100px；背景：线性渐变（0deg，透明6px，#e60a0a6px）重复y，线性渐变（0deg，透明50%，#0f0ae80）重复y，线性渐变（90deg，透明50%，#09f32f0)repeat-x,linear-gradient(90deg,transparent50%,#fad6480)repeat-x;背景尺寸：1px12px，1px12px，12px1px，12px1px；背景位置：00,100%0,00,0100%；动画：move21s无限线性；p{边距：1px；}}@keyframesmove2{从{}到{background-position:0-12px,100%12px,12px0,-12px100%;}}linear-gradient&&maskmask属性规范已经进入候选推荐规范列表，未来进入既定规范标准可谓板上钉钉。大家可以放心学，以后用得着。这里也可以使用mask来实现同样的动画效果，可以实现虚线边框渐变色的效果。和background不同的是mask需要在中间加一个不透明的mask，否则p元素的内容会被遮住。.box{宽度：100px；高度：100px；背景：线性渐变（0deg，#f0e，#fe0）；-webkit-mask:线性渐变(0deg,transparent6px,#e60a0a6px)repeat-y,linear-gradient(0deg,transparent50%,#0f0ae80)repeat-y,linear-gradient(90deg,transparent50%,#09f32f0)repeat-x,linear-gradient(90deg,transparent50%,#fad6480)repeat-x,linear-gradient(0deg,#fff,#fff)无重复；//这里不透明的颜色随便写-webkit-mask-size:1px12px,1px12px,12px1px,12px1px,98px98px;-webkit-mask-position:00,100%0,00,0100%,1px1px;溢出：隐藏；动画：move31s无限线性；p{高度：计算（100%-2px）；-颜色：#fff；}}@keyframesmove3{从{}到{-webkit-mask-position:0-12px,100%12px,12px0,-12px100%,1px1px;}}具体demo点这里PS今天有个人来找我们面试。五年的工作经验，说起自己参与了多少项目，一个人搭建了什么样的前端项目，css、js、html、vue等都精通，看得我瑟瑟发抖.然后我问了一个简单的问题，如何垂直居中，得到的回答是：使用flex；然后问flex怎么用，回答：不太了解；我问还有什么方法，回答是：transform；然后问为什么要transform，回答：不太了解。..等等等等，问了很多基础的东西，大部分都没看懂，更别提vue的相关原理，diff算法之类的了。最后问了一下期望薪水。答：我有18k的offer，期望不要低于18k。是不是不懂行情，还是根本不是寒冬，微薄的薪水求内推~~南京或者杭州地区。个人博客求友链~花式电子简历~有空可以看看。参考张哥的虚线边框遮罩教程