在CSS中创建点划线和点划线矩形可以通过使用伪元素和背景图案来实现。
示例代码:
.dotted-line {
position: relative;
height: 1px;
}
.dotted-line::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent 50%, black 50%);
background-size: 4px 1px;
}
示例代码:
.dotted-rectangle {
position: relative;
width: 200px;
height: 100px;
}
.dotted-rectangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent 50%, black 50%),
linear-gradient(to bottom, transparent 50%, black 50%);
background-size: 4px 1px, 1px 4px;
}
以上代码中,点划线的宽度和间距可以根据需要进行调整。可以通过修改背景颜色、渐变方向和图案大小来实现不同的点划线效果。
腾讯云相关产品和产品介绍链接地址:
企业创新在线学堂
企业创新在线学堂
Elastic 实战工作坊
云原生正发声
云+社区技术沙龙[第6期]
企业创新在线学堂
云+社区技术沙龙[第9期]
高校公开课
云+社区技术沙龙[第16期]
云+社区技术沙龙[第22期]
云+社区开发者大会(苏州站)
领取专属 10元无门槛券
手把手带您无忧上云