<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点划线边框</title> </head> <body> <div></div> <style> div { width: 100px; height: 100px; --borderwidth: 1px; border-left: var(--borderwidth) solid #e6e6e6; border-right: var(--borderwidth) solid #e6e6e6; position: relative; } div:after { content: ""; position: absolute; width: calc(100% + var(--borderwidth) * 2); height: 100px; bottom: -100px; left: calc(-1 * var(--borderwidth)); background-image: repeating-linear-gradient(to right, #e6e6e6 0px, #e6e6e6 1px, transparent 1px, transparent 4px); } </style> </body> </html>
原文：https://www.cnblogs.com/linding/p/14692668.html