当前位置: 首页 > 面试题库 >

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

唐星晖
2023-03-14
问题内容

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

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

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


问题答案:

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

/*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。这样,您也可以使用多个背景使用多个虚线边框。

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

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>


 类似资料:
  • 问题内容: 我在我的盒子中使用虚线样式边框 我想增加边框的每个点之间的空间。 问题答案: 此技巧适用于水平和垂直边框: 您可以使用背景大小调整大小,并使用线性渐变百分比调整比例。在此示例中,我有一条虚线为1px的点,间距为2px。这样,您也可以使用多个背景使用多个虚线边框。 在这个JSFiddle中尝试一下,或者看一下代码片段示例:

  • 问题内容: 我正在尝试通过使用iText 2.1.0在表的中间获取虚线边框(使用的单元格边框)。下面的代码即使在表格中间也会生成虚线边框。 您能帮我 单独添加特定单元的事件 吗? 问题答案: 您正在使用单元事件,但是您的代码非常糟糕。您还将引入PDF语法错误,如果仅使用iText的较新版本,将会收到警告。(关于iText版本过时的警告是有原因的。人们不应该忽略它们!!!) 话虽如此,我已经提出了解

  • 问题内容: 我敢肯定有一个解决此问题的简单方法。基本上,如果我有两列,如何在它们之间添加一个空格? 例如,如果html是: 输出将是彼此相邻的两列,占据了页面的整个宽度。假设将宽度设置为,则每个div都会很宽。 如果我想在两者之间留出空间,该如何实现?显然,通过引导程序自动使div大小成为补偿大小的每个大小 问题答案: 您可以使用此处记录的类来实现列之间的间距。间距是一致的,因此所有列均正确排列。

  • 如上图所示 该边框每个元素的宽度为8px,高度为1px,间距为2px,radius为4px 要如何实现? 看到网上比较多的方案是 border-image 引入切片的图片来实现,有什么不需要引入图片纯代码的方法吗?

  • 问题内容: 我的半径div带有5px虚线边框,但边框在中无法正确显示。它在IE和chrome中显示良好。 问题答案: 您的边界在Firefox上运行,请参见DEMO您可以删除半径来检查它。当您尝试用虚线边框画圈时,FireFox出现错误。 这是一个已知的错误。您的选择是: 如果只是为了画圆,请用绘制,例如此处所示 使用SVG(可能是内联),它支持多种描边路径的方式 制作图片PNG

  • 问题内容: 使用CSS后,如果应用了文本,是否可以增加文本和下划线之间的距离? 问题答案: 不可以,但是您可以使用和。 如果要使用与“下划线”相同的颜色(在我的示例中为边框),则只需省略颜色声明,即和。 对于多行,可以将多行文本包装在元素内的跨度中。例如,然后添加并在-