直接用图片的时候可以考虑用背景图片，这样就可以使用背景的repeat方式无限延长。
无论是用border还是图片都可以使用css3的transform属性设置方向和其他变形。
使用svg或canvas都可以更灵活改变虚线的方向等显示方式。
如果要考虑兼容低版本IE浏览器，当然是用border属性或图片背景兼容性最好，其他方式都需要另外引用js才能兼容。
你可以参考 border-style 的属性 。用hr 标记 border的属性为虚线就可以了<hr style="border:1px dashed #ff0000"/>
或者更多专爨业解答前端学xí群 497187010
none定义无边框。
hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
douВLe定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。
