css虚线边框怎么设置，css虚线边框代码。提起虚线框动画，可能大家会优先想到使用svg的方式。
01
方法一，linear-gradient方式
代码：
<style>.demo { width: 300px; margin: 0 auto; padding: 1px; animation: move .5s infinite; background-size: 10px 10px; background-position: 0 0, 5px 5px; background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);}@keyframes move { 50% { background-image: linear-gradient(135deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(135deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666); } 100% { background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666); }}.demo .content { background-color: #fff; padding: 20px;}</style><div class="demo"> <div class="content">前端妙音坊（公众号）</div></div>
原理：
利用background的 linear-gradient 线性渐变，实现黑白色块的棋盘，然后让黑白交替变化，从而产生动画效果。
02
方法二，offset path方式
<style>.holder { width:100px; height:100px; padding: 2px; overflow: hidden; margin: 0 auto; position: relative;}.holder p { font-size: 13px; text-align: center;}.border-top { width: 200px; height: 0px; overflow: hidden; border-top: 2px dashed blue; offset: path('M 0 0 L 100 0'); animation: move 4s linear infinite; position: absolute; left: 0; top: 1px;}.border-right { width: 0px; height: 200px; overflow: hidden; border-left: 2px dashed blue; offset: path("M 0 0 L 0 100") auto; animation: move 4s linear infinite; transform: rotate(90deg); position: absolute; right: -1px; top: 0;}.border-bottom { width: 200px; height: 0px; overflow: hidden; border-top: 2px dashed blue; offset: path('M 100 0 L 0 0') auto; animation: move 4s linear infinite; position: absolute; left: 0; bottom: -1px;}.border-left { width: 0px; height: 200px; overflow: hidden; border-left: 2px dashed blue; offset: path("M 0 100 L 0 0") auto; animation: move 4s linear infinite; position: absolute; left: 1px; top: 0; transform: rotate(90deg);}@keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; }}</style> <div class="holder"> <p>前端妙间坊<br>（公众号）</p> <div class="border-top"></div> <div class="border-right"></div> <div class="border-bottom"></div> <div class="border-left"></div></div>
不过，此方法稍显复杂，并且需要根据边的长度控制好animation的时间，否则各个边的运行速度会不一致，另外，还需要调整好 path("M 0 100 L 0 0") 的值。
上面的虚线使用的是border方式，如果不想使用默认的虚线样式，也可以使用background 线性渐变方式来达到虚线效果。
03
方法三，位移方式
<style>.holder { width:100px; height:100px; padding: 2px; overflow: hidden; margin: 0 auto; position: relative;}.holder p { font-size: 13px; text-align: center;}.border-top { width: 200px; height: 0px; overflow: hidden; border-top: 2px dashed blue; animation: moveRight 2s linear infinite; position: absolute; left: 0; top: 0;}.border-right { width: 0px; height: 200px; overflow: hidden; border-left: 2px dashed blue; animation: moveBottom 2s linear infinite; position: absolute; right: 0; top: 0;}.border-bottom { width: 200px; height: 0px; overflow: hidden; border-top: 2px dashed blue; animation: moveLeft 2s linear infinite; position: absolute; left: 0; bottom: 0;}.border-left { width: 0px; height: 200px; overflow: hidden; border-left: 2px dashed blue; animation: moveUp 2s linear infinite; position: absolute; left: 0; top: 0;}@keyframes moveRight { from { left: -100%; } to { left: 0%; }}@keyframes moveBottom { from { top: -100%; } to { top: 0%; }}@keyframes moveLeft { from { left: 0%; } to { left: -100%; }}@keyframes moveUp { from { top: 0%; } to { top: -100%; }}</style> <div class="holder"> <p>前端妙音坊<br>（公众号）</p> <div class="border-top"></div> <div class="border-right"></div> <div class="border-bottom"></div> <div class="border-left"></div></div>
本文地址：百科问答频道 https://www.neebe.cn/wenda/903002.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
