Html 如何在CSS中创建点划线、点划线和矩形

如何创建点划线和点划线以及类似的矩形

在CSS中，不使用指向图像或其他内容的外部链接（如果没有更好的方法，可以使用内联数据URL）

包含以下示例：

hr.style17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}

---

。它使用内容和旋转CSS属性，也许可以使用这些属性。

您可以尝试将

重复线性渐变

和

径向渐变

。破折号点{
高度：50px；
背景：
径向梯度（中心圆，#000 2px，透明3px）5px 50%/20px 5px重复-x，
重复线性渐变（向右，#000，#000 10px，透明10px，透明20px）中心/100%3px不重复
}
.点划线{
高度：50px；
背景：
径向梯度（中心圆，#000 2px，透明3px）0px 50%/30px 5px重复-x，
径向梯度（中心圆，#000 2px，透明3px）10px 50%/30px 5px重复-x，
重复线性梯度（向右，#000，#000 10px，透明10px，透明30px）中心/100%3px不重复；
}

此方法仅适用于行。如何创建点划线和点划线矩形？@Andrus检查更新，您只需在每个点上重复side@TemaniAfif请您解释一下

5px 50%/20px 5px

@dokukancavus的意思是什么？它是

背景位置/背景大小

，因此位于

5px 50%

（左上角）尺寸为

20px 5px

（宽-高）。。如果您想了解背景位置的百分比值如何工作的更多详细信息，可以阅读以下内容：