如何增加虚线边框之间的距离


286

我在我的盒子中使用虚线样式边框

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

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

Answers:


443

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

/*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中尝试一下,或者看一下代码片段示例:


26
应该是选定的答案。
凯文·尤尔科夫斯基

7
恕我直言,这是n度的骇客。
穆罕默德·乌默尔

7
我想做同样的事情,但是虚线边框的宽度是3px而不是1px,现在变成正方形而不是虚线。
Bhojendra Rauniyar 2015年

5
我制作了一个SCSS mixin来实现这一点,并快速更改颜色和间距。在github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin中进行检查。
弗洛尔·布拉兹

5
如果我希望所有4条边都虚线掉怎么办?
Ryan Shillington

141

这是我在最近的项目中使用的一个技巧,几乎可以用水平边框实现我想要的任何功能。我<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*/
}

这也意味着您可以将文本阴影添加到点,渐变等。任何您想要的...

好吧,它非常适合水平边框。如果您需要垂直的,则可以为另一个小时指定一个类,并使用CSS3 rotation属性。


2
这个跨浏览器兼容吗?
J82

57
我无法想象维持a **会带来多大的痛苦。
卡扎伊

1
如何获得垂直效果相同?
Rinku 2013年

4
@Rinku与transform:rotate(90deg); 显示:块;
Jeroen K 2013年

4
非常丑陋,但是非常聪明:)我还注意到,如果我将height设置为0,则可以更好地控制布局;并使用填充来控制位置。所以我想在底部的虚线下面留一点空间,所以我使用了填充:0 0 10px;
MatthewLee 2014年

121

您不能使用纯CSS做到这一点-CSS3规范甚至对此都有特定的报价:

注意:无法控制点和破折号的间距,也不能控制破折号的长度。鼓励实现者选择使角对称的间距。

但是,您可以使用边框图像或背景图像来解决问题。


7
您可以对完全可自定义的边框使用渐变色(纯CSS)。请参阅下面的答案
Olivictor 2014年

3
-1,@Shadikka,什么是CSS3规范说的是,它不能用做border: dotted的,但它可以用梯度做到这一点作为Eagorajose的回答显示。
Pacerier 2014年

30

这使用标准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>

应用于带有大圆角的小元素可能会带来一些有趣的效果。


2
努力工作!这是IMO真正可行而又不难维护的唯一答案。即使已接受的答案也仅适用于div的某一边缘。这适用于整个边界。
Ryan Shillington

1
到目前为止,这是最好,最优雅的答案。应该标记为解决方案...
Beejee

19

因此,从给出的答案开始,并应用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%是破折号的实际宽度。因此,可以在每个边界侧具有不同的长度短划线。


17

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

  • none:无边框,将宽度设置为0。这是默认值。
  • hidden:与“ none”相同,除了在表格元素的边界冲突解决方面。
  • 破折号:一系列短破折号或线段。
  • 点:一系列点。
  • double:两条直线加起来定义为边框宽度的像素量。
  • 凹槽:雕刻效果。
  • inset:使框显示为嵌入式。
  • 开始:与“开始”相反。使框显示3D(浮雕)。
  • 脊:“凹槽”的对面。边框出现3D(出来)。
  • 实心:单条直线,实线。

除了这些选择之外,没有其他方法可以影响标准边框的样式。

如果您不喜欢这种可能性,则可以使用CSS3,border-image但请注意,浏览器对此的支持仍然参差不齐。


谢谢pekka,这意味着我不能使用border属性...所以我必须使用image。
卡利·查兰·拉杰普特

@kc如果您不喜欢边框样式,是的。
Pekka

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 */

#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;
}
<div id="page"></div>


8

这是一个古老但仍然非常相关的主题。在目前顶级的回答很好,但仅限于非常小的点工作。正如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应与这些。

定义两个停止点时,圆点既美观又平滑:半径为一半的纯黑色,而不是整个半径的渐变。


6

这是一个确实很老的问题,但是在Google中排名很高,因此我将介绍一种可以根据您的需求使用的方法。

就我而言,我想要一个粗的虚线边框,使虚线之间的间隔最小。我使用了CSS模式生成器(像这样的一个:http : //www.patternify.com/)来创建10px宽x 1px高的模式。其中9px是纯破折号颜色,1px是白色。

在我的CSS中,我将该模式包含为背景图像,然后使用background-size属性将其放大。我最终得到20px x 2px的重复破折号,其中18px是实线,2px是白色。您可以将其放大甚至更多,以获得非常粗的虚线。

令人高兴的是,由于图像被编码为数据,因此您没有其他外部HTTP请求,因此没有性能负担。我将图片存储为SASS变量,因此可以在自己的网站中重复使用它。



2

这么多人说“你不能”。是的你可以。的确,没有css规则来控制破折号之间的装订线间距,但是css具有其他功能。不要这么快地说某件事无法完成。

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

基本上,边框顶部的高度(在这种情况下为5px)是确定装订线“宽度”的规则。O如果需要,则需要调整颜色以满足您的需求。这也是水平线的一个小示例,请使用左和右制作垂直线。


1
公平地说,我想大多数人都说您不能对调整边框点线样式的字面意义做到这一点。他们并不是说使用其他CSS属性不可能实现类似的目的。在我看来,从语义的角度来看,使用背景图像或边框图像(如其他人所展示的)比使用伪元素和十几行CSS更有意义。
2014年

2

我做了一个javascript函数,用svg创建点。您可以在javascript代码中调整点间距和大小。

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();
div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}
<div class="dotted">Lorem Ipsum</div>


1

如果您只针对现代浏览器,并且可以将边框与内容分开放置在单独的元素上,那么可以使用CSS比例转换获得更大的点或破折号:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

要使其对齐,需要进行大量的位置调整,但是它可以工作。通过更改边框的厚度,起始大小和比例因子,您可以达到所需的厚度与长度的比例。唯一无法触及的是破折号比例。


这样一来,内容也将得到应用scale(8)
Pardeep Jain

边框:1px黑色虚线;在chrome浏览器中被视为未知属性。
Inzmam ul Hassan

1
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

这就是我所做的- 在此处使用图片 输入图片说明


0

AFAIK没有办法做到这一点。您可以使用虚线边框,也可以稍微增加边框的宽度,但是CSS不可能获得更多的点距。


0

您可以创建一个画布(通过javascript)并在其中绘制一条虚线。在画布中,您可以控制破折号及其之间的间隔应有多长。


那是一个非常复杂的解决方案。我忍不住觉得这也将花费更多的性能和可观的加载时间,具体取决于页面上其余JS的权重。
Emmett R.
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.