控制虚线边框行程长度和笔画之间的距离

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

本地虚线边框属性值不提供对破折号本身的控制...所以带上border-image属性!

用你自己的边界酿造 border-image

兼容性:它提供了出色的浏览器支持(IE 11和所有现代浏览器).可以将普通边框设置为旧版浏览器的后备.

让我们创造这些

这些边框将显示完全相同的跨浏览器!

第1步 - 创建合适的图像

这个例子是15像素宽,15像素高,间隙目前是5px宽.这是一个透明的.png.

这是放大时在photoshop中的样子:

这就是扩展的样子:

控制间隙和行程长度

要创建更宽/更短的间隙或笔划,请加宽/缩短图像中的间隙或笔划.

这是一个10px宽的图像:

正确缩放=

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

1. 定义border-image-source:

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

2. 可选 - 定义border-image-width:

   border-image-width: 1;
   

   默认值为1.也可以使用像素值,百分比值或另一个倍数(1x,2x,3x等)进行设置.这会覆盖任何一border-width组.

3. 定义border-image-slice:

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

   border-image-slice: 2; 
   

   切片看起来像这样,从顶部,右侧,底部和左侧2个像素:

   

4. 定义border-image-repeat:

   在这个例子中,我们希望模式在div周围均匀重复.所以我们选择:

   border-image-repeat: round;
   

写速记

上面的属性可以单独设置,也可以使用border-image进行简写:

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 2

除了border-image属性之外,还有一些其他方法可以创建虚线边框,控制笔划的长度和它们之间的距离.它们描述如下:

方法1:使用SVG

我们可以使用a path或polygon元素创建虚线边框并设置stroke-dasharray属性.该属性采用两个参数,其中一个定义破折号的大小,另一个确定它们之间的空间.

优点:

1. SVG本质上是可伸缩的图形,可以适应任何容器尺寸.
2. 即使有border-radius参与,也能很好地工作.我们只想有更换path用circle像这个答案(或)转换path成一个圆圈.
3. 浏览器对SVG的支持非常好,可以使用VML for IE8-提供后备.

缺点:

1. 当容器的尺寸不成比例地改变时,路径倾向于缩放,导致破折号的大小和它们之间的空间的变化(尝试将鼠标悬停在代码片段中的第一个框上).这可以通过添加vector-effect='non-scaling-stroke'(如第二个框中所示)来控制,但IE中的此属性的浏览器支持为nil.

.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背景图像并适当地定位它们以创建虚线边框效果.这也可以通过a来完成,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 3

更新 感谢 kovart 提供了这个很棒的工具，尝试一下 https://kovart.github.io/dashed-border-generator/

我的回答是：

我最近也遇到了同样的问题。我已经解决了这个问题，希望对某人有所帮助。

HTML + 顺风

<div class="dashed-border h-14 w-full relative rounded-lg">
    <div class="w-full h-full rounded-lg bg-page z-10 relative">
        Content goes here...
    <div>
</div>

CSS

.dashed-border::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: 16px;
  z-index: 0;
  border-radius: 0.5rem;
}
.dashed-border::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: calc(100% + 4px);
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, #333 50%, transparent 50%);
  background-size: 4px 16px;
  z-index: 1;
  border-radius: 0.5rem;
}

Answer 4

@kovart制作了一个很酷的工具，称为虚线边框生成器。

它使用 svg 作为背景图像，允许设置您想要的笔划虚线数组，非常方便。

然后，您只需将它用作元素上的背景属性来代替边框：

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Answer 5

Css渲染是特定于浏览器的,我不知道对它进行任何微调,你应该按照Ham的建议使用图像.参考:http://www.w3.org/TR/CSS2/box.html#border-style-properties

Answer 6

简短的一句:不,不是.您将不得不使用图像.

Answer 7

笔画长度取决于笔画宽度。您可以通过增加宽度来增加长度并通过内部元素隐藏部分边框。

编辑：添加pointer-events: none;感谢BENJ。

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
    pointer-events: none;
}

https://jsfiddle.net/ksf9zoLh/

Answer 8

.outline {
    outline: 48px dashed #d5fb62;
    outline-offset: -4px;
    overflow:hidden;
}

如果溢出隐藏不是问题，则概述 4 而不是 48。

<div class="outline"></div>