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

时间：2011-06-06 10:00:54

标签： html css css3 border

我在我的方框中使用虚线样式边框，如

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

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

18 个答案:

答案 0 :(得分：370)

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

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

答案 1 :(得分：136)

这是我在最近的一个项目中用来实现几乎任何我想要的水平边框的技巧。每次需要水平边框时我都会使用<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属性。

答案 2 :(得分：116)

你不能用纯CSS做到 - CSS3 spec甚至有一个特定的引用：

  

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

但是，您可以使用a border-image或背景图片来完成这一操作。

答案 3 :(得分：17)

请参阅MDN docs了解border-style的可用值：

  
      
  • none：无边框，将宽度设置为0。   这是默认值。
    •   
  • hidden：与'none'相同，除了   表的边界冲突解决方案   元素。
    •   
  • 破灭：系列简短   破折号或线段。
    •   
  • 点缀：   点系列。
    •   
  • 双：两连胜   加起来像素数量的线条   定义为border-width。
    •   
  • 凹槽：   雕刻效果。
    •   
  • 插图：制作盒子   嵌入式。
    •   
  • 一开始：相反   “插页”。使框显示为3D   （浮雕）。
    •   
  • ridge：对面的   '槽'。边框显示为3D   （出来）。
    •   
  • 固体：单身，   直线，实线。
    •   

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

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

答案 4 :(得分：17)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 5 :(得分：9)

首先从给出的答案开始并应用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％是破折号的实际宽度。因此，每个边界侧可能有不同的长度破折号。

答案 6 :(得分：6)

这是一个非常古老的问题，但它在Google中排名很高，所以我会投入我的方法，可以根据您的需要进行操作。

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

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

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

答案 7 :(得分：2)

简短的回答：你不能。

您必须使用border-image属性和一些图片。

答案 8 :(得分：2)

如果您只定位现代浏览器，并且您可以将边框放在与内容不同的元素上，那么您可以使用CSS缩放转换来获得更大的点或短划线：

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

需要进行大量的位置调整以使其排队，但它可以正常工作。通过更改边框的粗细，起始尺寸和比例因子，您可以获得所需的厚度 - 长度比。只有你无法触及的是短距离比。

答案 9 :(得分：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）是确定装订线“宽度”的规则。如果您需要调整颜色以满足您的需求。这也是水平线的一个小例子，左右使用来制作垂直线。

答案 10 :(得分：2)

基于@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>

答案 11 :(得分：2)

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

在此基础上，我使用了from sklearn.externals.joblib import Parallel,delayed from numpy.linalg import norm,lstsq V = np.random.rand(5,5) W = np.random.randint(0,2,(5,5)) for i in xrange(1,max_iter+1): U = Parallel(n_jobs=-1)(delayed(lstsq)(np.dot(V,np.diag(Wu)), np.dot(V[u],np.diag(Wu)),rcond=None) for u,Wu in enumerate(W)) 。另外，使用the answer from Ukuser32，可以轻松地为所有四个边框重复点属性。只有角落不是完美的。

radial-gradient
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> expects：

  • 形状和可选的position
  • 两个或多个停靠点：颜色和半径

在这里，我想要一个5像素直径（2.5像素半径）的点，两点之间直径（10像素）的2倍，总计15像素。 radial-gradient应该与这些匹配。

定义两个停靠点以使圆点美观且平滑：纯黑色代表半径的一半，而不是整个半径的梯度。

答案 12 :(得分：1)

在我的情况下，我需要弯角和细边框，所以我想出了以下解决方案：

/* For showing dependencies between attributes */
 :root {
  --border-width: 1px;
  --border-radius: 4px;
  --bg-color: #fff;
}


/* Required: */
.dropzone {
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  background-clip: padding-box;
  background-color: var(--bg-color);
}
.dropzone::before {
  content: '';
  position: absolute;
  top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */
  right: calc(var(--border-width) * -1);
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  z-index: -1;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px);
  border-radius: var(--border-radius);
  background-color: rgba(0, 0, 0, 0.38);
}


/* Optional: */
html {
  background-color: #fafafb;
  display: flex;
  justify-content: center;
}
.dropzone {
  box-sizing: border-box;
  height: 168px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dropzone::before {
  transition: background-color 0.2s ease-in-out;
}
.dropzone:hover::before {
  background-color: rgba(0, 0, 0, 0.87);
}
<div class='dropzone'>
  Drag 'n' drop some files here, or click to select files
</div>

这个想法是将svg模式放置在元素后面，并仅显示该模式的细线作为元素边界。

答案 13 :(得分：0)

我们需要有圈子，这就是我们解决的方法:)

或多或少是对需要样式化“边框”的元素进行的：

:before {
      position: absolute;
      width: 100%;
      height: 10px;
      top:0;
      left: 0;
      transform: translateY(-50%);
      content: '';
      background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
    }

演示：https://codepen.io/arnoldsv/pen/PoWYxbg

答案 14 :(得分：0)

我做了一个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>

答案 15 :(得分：0)

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

这就是我所做的-使用图像 enter image description here

答案 16 :(得分：0)

你可以创建一个画布（通过javascript）并在其中画一条虚线。在画布中，您可以控制短划线和空间之间的长度。

答案 17 :(得分：0)

AFAIK没有办法做到这一点。您可以使用虚线边框或者稍微增加边框的宽度，但使用CSS无法获得更多的间隔点。

相关问题
最新问题