如何在 CSS 中创建点划线和点划线和矩形答案

【问题标题】：How to create dash dot and dash dot dot lines and rectanges in CSS如何在 CSS 中创建点划线和点划线和矩形
【发布时间】：2019-01-26 22:27:18
【问题描述】：

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

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

【问题讨论】：

标签： html css border

【解决方案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;
}

&lt;div class="dash-dot"&gt;&lt;/div&gt;

【讨论】：

此方法仅适用于行。如何创建点划线和点划线矩形？
@Andrus 检查更新，你只需要在每一边重复
@TemaniAfif 请你解释一下5px 50%/20px 5px的意思是什么
@DogukanCavus 它是background-position/background-size，所以放置在5px 50%（左上角），大小为20px 5px（宽度高度）.. 如果您想了解更多关于背景位置百分比值如何工作的详细信息您可以阅读：stackoverflow.com/a/51734530/8620333