控制虚线的边界冲程长度和中风之间的距离

Question

是否可以控制CSS中虚线边框中风之间的长度和距离？

下面的示例在浏览器之间显示不同：

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

大差异：IE 11 / Firefox / Chrome

是否有任何方法可以更好地控制虚线边界的外观？

Answer 1

CSS渲染是特定于浏览器的，我不知道对其进行任何微调，您应该按照Ham的建议使用图像。参考： http://www.w3.org/tr/css2/box.html#border-style-properties

Answer 2

本地虚线的边境财产价值不会提供对破折号本身的控制...因此 border-image 财产！

酿造自己的边界 border-image

兼容性: ： 它提供 出色的浏览器支持 （即11和所有现代浏览器）。可以将正常边框设置为较旧浏览器的后备。

让我们创建这些

这些边界将显示完全相同的跨浏览器！

步骤1-创建合适的图像

这个示例是15像素宽x 15像素，当前差距为5px宽。它是具有透明度的.png。

这就是Photoshop中的样子，当放大时：

这就是扩展的外观：

控制差距和中风长度

要创建较宽 /较短的间隙或笔触，请扩大 /缩短图像中的间隙或笔触。

这是具有较大10px空白的图像：

正确缩放=

步骤2-创建CSS - 此示例需要4个基本步骤

1. 定义 边界形象源:

   border-image-source:url("http://i.stack.imgur.com/wLdVc.png");  
   

2. 选修的 - 定义 边界形象宽度:

   border-image-width: 1;
   

   默认值为1。它也可以使用像素值，百分比值或其他多个倍数（1x，2x，3x等）设置。这覆盖了任何 border-width 放。

3. 定义 边界图像板:

   在此示例中，图像顶部，右，底部和左边框的厚度为2px，并且外部没有间隙，因此我们的切片值为2：

   border-image-slice: 2; 
   

   切片看起来像这样，从顶部，右，底部和左侧的2个像素：

   

4. 定义 边界形象重复:

   在此示例中，我们希望模式在我们的Div周围均匀地重复。因此，我们选择：

   border-image-repeat: round;
   

写速记

可以单独设置上面的属性，也可以使用速记设置 边界形象:

border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;

完整的示例

注意 border: dashed 4px #000 倒退。不支持浏览器将收到此边界。

.bordered {
  display: inline-block;
  padding: 20px;
  /* Fallback dashed border
     - the 4px width here is overwritten with the border-image-width (if set)
     - the border-image-width can be omitted below if it is the same as the 4px here
  */
  border: dashed 4px #000;
  
  /* Individual border image properties */
  border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;  
  
  /* or use the shorthand border-image */
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/
.largeGaps {
  border-image-source: url("http://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Answer 3

除了 border-image 属性，还有其他几种方法可以创建虚线的边框，并控制中风的长度以及它们之间的距离。它们如下所述：

方法1：使用SVG

我们可以使用一个 path 或a polygon 元素并设置 stroke-dasharray 财产。该属性采用两个参数，其中一个参数定义了仪表板的大小，另一个参数决定了它们之间的空间。

优点：

1. SVG本质上是可扩展的图形，可以适应任何容器尺寸。
2. 即使有一个 border-radius 涉及。我们只会替换 path 与 circle 像 这个答案 （或）转换 path 变成一个圆圈。
3. 浏览器支持SVG 很好，可以使用IE8-的VML提供后备。

缺点：

1. 当容器的尺寸不成比例地变化时，路径倾向于扩展，导致仪表板的大小和它们之间的空间变化（尝试在摘要中的第一个框上徘徊）。这可以通过添加来控制 vector-effect='non-scaling-stroke' （如第二个框中），但是IE中对此属性的浏览器支持为零。

.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

---

方法2：使用梯度

我们可以使用多个 linear-gradient 背景图像并适当地定位它们以创建虚线的边框效应。这也可以通过 repeating-linear-gradient 但是，由于使用重复梯度，因此没有太大的改进，因为我们需要每个梯度仅在一个方向上重复。

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

优点：

1. 可扩展的，即使容器的尺寸是动态的，也可以调整。
2. 不利用任何额外的伪元素，这意味着可以将它们搁置一旁。

缺点：

1. 浏览器对线性梯度的支持 相对较低，如果您想支持IE 9-，这是不做的。即使像CSS3 PIE这样的库也不支持IE8-中的梯度图案的创建。
2. 不能使用 border-radius 之所以参与，是因为背景不会基于 border-radius. 。他们被剪裁了。

---

方法3：盒子阴影

我们可以使用伪元素创建一个小条（以破折号的形状），然后创建多个 box-shadow 它的版本以在下面的片段中创建一个边框。

如果破折号是正方形的形状，那么单个伪元素就足够了，但是如果它是矩形，我们将需要一个伪元素，用于顶部 +底部边界，另一个用于左 +右边界。这是因为顶部边框上仪表板的高度和宽度与左侧的仪表板不同。

优点：

1. 仪表板的尺寸可通过更改伪元素的尺寸来控制。通过修改每个阴影之间的空间，可以控制间距。
2. 可以通过为每个盒子阴影添加不同的颜色来产生非常独特的效果。

缺点：

1. 由于我们必须手动设置仪表板和间距的尺寸，因此当父盒的尺寸动态时，这种方法是不好的。
2. IE8和下部不 支持框影子. 。但是，可以使用CSS3 PIE等库来克服这一点。
3. 可以与 border-radius 但是，将它们定位会非常棘手，因为必须在圈子上找到要点（甚至可能 transform).

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

Answer 4

简短：不，不是。您将必须使用图像。