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

Question

如何创建类似于点划线和虚线矩形的图形

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

https://codepen.io/ibrahimjabbari/pen/ozinB

包含一些示例，例如

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属性，也许可以使用这些。

- Andrus

Answer 1

你可以尝试使用repeating-linear-gradient和radial-gradient的组合。

.dash-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 50%/20px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) center/100% 3px no-repeat 
}
.dash-dot-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 0px  50%/30px 5px repeat-x,
    radial-gradient(circle at center,#000 2px,transparent 3px) 10px 50%/30px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 30px) center/100% 3px no-repeat;
}

<div class="dash-dot"></div>

<div class="dash-dot-dot"></div>

为了得到一个矩形，你需要在每一边重复相同的形状：

.dash-dot {
  height:210px;
  background:
    /*right*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) calc(100% - 1px) 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 100% 5px/5px 20px repeat-y,    
    /*left*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) 1px 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px)  0 5px/5px 20px repeat-y,
    /*top*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 1px/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 0/20px 5px repeat-x,
    /*bottom*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 calc(100% - 1px)/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 100%/20px 5px repeat-x;
}

<div class="dash-dot"></div>

- Temani Afif

---

这种方法仅适用于线条。如何创建虚线和点划线矩形？ - Andrus

@Andrus，请检查更新，您只需要在每个侧面上重复即可。 - Temani Afif

@TemaniAfif，请问您能解释一下5px 50%/20px 5px的含义吗？ - doğukan

@DogukanCavus 这是 background-position/background-size，放置在左上角的 5px 50% 处，大小为 20px 5px（宽度高度）... 如果您想了解背景位置中百分比值的工作原理的更多细节，可以阅读此文：https://dev59.com/hVUK5IYBdhLWcg3wgQHd#51734530 - Temani Afif