如何制作方形虚线边框

Question

我想制作一个方形间隔的虚线边框，任何人都可以告诉我们如何制作这些点方形，喜欢，

这是我的代码，请帮帮我。

.dots{
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}
div {
  padding: 10px 50px;
  width: 100px;
  height: 200px; 
}

<div class="dots">Dotted border</div>

Answer 1

这是你的例子：

<div class="dots"></div>

和CSS：

.dots{
  width:10px;
  height:10px;
  background-color: #f3c4f8;
  position: relative;
}
.dots::before {
  content: "";
  width:10px;
  height:10px;
  background-color: #ab43ba;
  position: absolute;
  left:10px;
}

另外jsfiddle链接进行测试。

Answer 2

我修改了你的CSS，需要微调：）

.dots:after{
   background-image: linear-gradient(to bottom, white 1%, red 0%, red 20%, rgba(255, 255, 0, 0) 0%);
  background-position: right;
  background-size: 6px 30px;
  background-repeat: repeat-y;
  position: absolute;
  left: 5px;
  width: 20px;
  height: 200px;
  content: '';
}

.dots:before {
  background-image: linear-gradient(to bottom, white 1%, red 0%, red 20%, rgba(255, 255, 0, 0) 0%);
  background-position: right;
  background-size: 6px 30px;
  background-repeat: repeat-y;
  position: absolute;
  left: 15px;
  width: 20px;
  height: 200px;
  content: '';
}

div {
  padding: 10px 50px;
  width: 100px;
  height: 200px; 
}

<div class="dots">Dotted border</div>

Answer 3

<div style="border: 2px dotted black">
</div>

Answer 4

我找到了另一种简单的方法，（几乎）要共享的跨浏览器。

“点缀”不是跨浏览器！边界值“点缀”在Firefox中为圆形，在Chrome中为方形。调整大小时，它们表现得很奇怪。

1. 制作一个简单的SVG文件，将两种颜色作为平方元素：

<?xml version="1.0" encoding="utf-8"?>
<svg class="it-dotted-line" xmlns="http://www.w3.org/2000/svg" width="8" height="8">
  <rect width="4" height="4" style="fill:#F4EDF4"></rect>
  <rect x="4" width="4" height="4" style="fill:#B489B4"></rect>
</svg>

高度也为8，因此图像是正方形的-易于使用。

1. 将其另存为.svg文件，然后将其上传到您的网络酒店，以便您可以在border-image中使用它。

只需将代码放入代码编辑器中，然后将其保存为.svg文件即可。

1. CSS：

.dots {
  -o-border-image: url(/svg-dotted.svg) 25% repeat; /* Opera 11-12.1 */
  -webkit-border-image: url(/svg-dotted.svg) 25% repeat ; /* Safari 3.1-5 */   
  border-image: url(/svg-dotted.svg) 25% repeat;
  border-width: 0px; // Only for top border - remove others
  border-top-width: 10px; 
  border-style: solid;
}

结果（页脚顶部）：

注意：Internet Explorer 10和更早版本不支持border-image属性。