CSS，设置虚线网格为元素背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格背景</title>
<style>
body{
height: 1080px;
width: 1920px;
margin: 0;
}
/* 虚线部分 */
.bg-grid::before,
.bg-grid::after {
opacity: .5;
content: '';
background-repeat: repeat;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.bg-grid::before {
/* 从左往右 */
background: linear-gradient(to right, rgba(255, 255, 255, 1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 1px, transparent 1px);
background-size: 10px 30px;
}
.bg-grid::after {
/* 从上往下 */
background:
linear-gradient(to bottom, rgba(255, 255, 255, 1) 1px, transparent 1px),
linear-gradient(to right, rgba(0, 0, 0, 0.6) 1px, transparent 1px);
background-size: 30px 10px;
}
.bg-grid {
position: absolute;
top: 10%;
left: 50%;
width: 400px;
height: 400px;
z-index: -1;
border-right: 1px #adaeaf dashed;
border-bottom: 1px #adaeaf dashed;
}
/* 实线条部分 */
.bg-grid1{
position: absolute;
top: 10%;
left: 20%;
width: 400px;
height: 400px;
background: linear-gradient(to right,#5f5f5f 1px,transparent 1px),
linear-gradient(to bottom,#5f5f5f 1px,transparent 1px);
background-size: 20px 20px;
background-repeat: repeat;
border-right: 1px #5f5f5f solid;
border-bottom: 1px #5f5f5f solid;
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-grid1"></div>
</body>
</html>
效果图
