如何增加虚线边框点之间的空间

Question

我在我的盒子里使用点缀式边框

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

我想增加边框每个点之间的空间.

Answer 1

这个技巧适用于水平和垂直边框:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

您可以使用背景大小调整大小,使用线性渐变百分比调整比例.在这个例子中,我有一条1px点和2px间距的虚线.这样,您也可以使用多个背景来创建多个虚线边框.

在这个JSFiddle中尝试一下,或者看一下代码片段示例:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  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>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

Answer 2

这是我在最近的一个项目中用来实现几乎任何我想要的水平边框的技巧.我<hr/>每次需要水平边框时都会使用.为此hr添加边框的基本方法是类似的

 hr {border-bottom: 1px dotted #000;}

但是如果你想控制边框,例如增加点之间的空间,你可以尝试这样的事情:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

在下面,您创建边框(这是一个带点的示例)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

这也意味着你可以添加文字阴影到点,渐变等任何你想要的东西......

嗯,它适用于水平边框.如果你需要垂直的,你可以为另一个hr指定一个类并使用CSS3 rotation属性.

Answer 3

你不能用纯CSS做到这一点 - CSS3规范甚至有一个特定的引用:

注意:无法控制点和短划线的间距,也无法控制短划线的长度.鼓励实施选择使角落对称的间距.

但是,您可以使用边框图像或背景图像来完成这一操作.

Answer 4

聚会迟到了，但我在网上发现了这个简洁的小工具。

https://kovart.github.io/dashed-border-generator/

Answer 5

这使用标准CSS边框和伪元素+ overflow:hidden.在该示例中,您将获得三个不同的2px虚线边框:正常,间隔为5px,间隔为10px.实际上是10px,只有10-8 = 2px可见.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

应用于具有大圆角的小元素可以产生一些有趣的效果.

Answer 6

有关以下内容的可用值,请参阅MDN文档border-style:

• none:无边框,将宽度设置为0.这是默认值.
• 隐藏:与"无"相同,但表元素的边界冲突解决方案除外.
• 虚线:短划线或线段系列.
• 点缀:点系列.
• double:两条直线,加起来定义为border-width的像素数量.
• 凹槽:雕刻效果.
• 插图:使框显示为嵌入式.
• 一开始:'插图'对面.使框显示为3D(浮雕).
• 山脊:'凹槽'的对面.边框显示为3D(出来).
• 实心:单,直,实线.

除了这些选择之外,没有办法影响标准边框的风格.

如果您不喜欢这些可能性,可以使用CSS3,border-image但请注意,浏览器对此的支持仍然非常不稳定.

Answer 7

因此,从给出的答案开始并应用CSS3允许多个设置的事实 - 以下代码对于创建完整的框非常有用:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

值得注意的是,背景尺寸中的10px给出了划线和间隙将覆盖的区域.背景标记的50%是破折号的实际宽度.因此,可以在每个边界侧具有不同的长度破折号.

Answer 8

使用速记语法基于@Eagorajose 的答案构建 4 个边解决方案：

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}

Answer 9

这是一个非常古老的问题,但它在谷歌的排名很高,所以我将投入我的方法,可以根据您的需要工作.

在我的情况下,我想要一个厚实的虚线边框,在破折号之间有一个最小的中断.我使用了一个CSS模式生成器(就像这个:http://www.patternify.com/)来创建一个10px宽,1px高的模式.9px是纯色,1px是白色.

在我的CSS中,我将该模式作为背景图像包含在内,然后使用background-size属性将其缩放.我最终得到了一个20px乘2px的重复短划线,其中18px是实线和2px白色.对于非常粗的虚线,您可以进一步扩展它.

好处是,由于图像被编码为数据,因此您没有额外的外部HTTP请求,因此没有性能负担.我将我的图像存储为SASS变量,因此我可以在我的网站中重复使用它.

Answer 10

这是一个古老但仍然非常相关的主题。在目前顶级的回答很好，但仅限于非常小的点工作。正如Bhojendra Rauniyar在评论中指出的那样，对于较大的点（> 2px），这些点显示为正方形而不是圆形。我发现此页面搜索的是间隔的点，而不是间隔的正方形（甚至是破折号，如此处的某些答案所用）。

我以此为基础radial-gradient。同样，使用Ukuser32的答案，可以轻松地为所有四个边框重复点属性。仅角落是不完美的。

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}

<div>Some content with round, spaced dots as border</div>

该radial-gradient 预期：

• 形状和位置
• 两个或多个停靠点：颜色和半径

在这里，我想要一个5像素直径（2.5像素半径）的点，其点之间的直径（10像素）的2倍，总计15像素。本background-size应与这些。

定义了两个停止点，以使圆点美观且平滑：实心黑色表示半径的一半，而不是整个半径的渐变。