<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大漠虚线边框</title> <style type="text/css"> div { width: 200px; height: 200px; margin: 20px auto; background-image: -webkit-linear-gradient(left, #f36 0, #f36 49.9%, transparent 50%, transparent 100%), -webkit-linear-gradient(top, #f36 0, #f36 49.9%, transparent 50%, transparent 100%), -webkit-linear-gradient(right, #f36 0, #f36 49.9%, transparent 50%, transparent 100%), -webkit-linear-gradient(bottom, #f36 0, #f36 49.9%, transparent 50%, transparent 100%); background-image: linear-gradient(to right, #f36 0, #f36 49.9%, transparent 50%, transparent 100%), linear-gradient(to bottom, #f36 0, #f36 49.9%, transparent 50%, transparent 100%), linear-gradient(to left, #f36 0, #f36 49.9%, transparent 50%, transparent 100%), linear-gradient(to top, #f36 0, #f36 49.9%, transparent 50%, transparent 100%); background-repeat: repeat-x, repeat-y,repeat-x,repeat-y; background-position: left top, right top,right bottom,left bottom; background-size: 20px 3px, 3px 20px,20px 3px,3px 20px; border-radius: 20px; background-color: rgba(255, 51, 102, 0.13); } section { width: 200px; height: 200px; margin: 20px auto; border: 3px dashed #f36; background-color: rgba(255, 51, 102, 0.13); border-radius: 20px; } </style> </head> <body> <div></div> <section></section> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 大漠虚线边框 喜欢 (2)or分享 (0)
