我在我的盒子中使用虚线样式边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边框的每个点之间的空间。
我在我的盒子中使用虚线样式边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边框的每个点之间的空间。
Answers:
此技巧适用于水平和垂直边框:
/*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中尝试一下,或者看一下代码片段示例:
这是我在最近的项目中使用的一个技巧,几乎可以用水平边框实现我想要的任何功能。我<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
属性。
您不能使用纯CSS做到这一点-CSS3规范甚至对此都有特定的报价:
注意:无法控制点和破折号的间距,也不能控制破折号的长度。鼓励实现者选择使角对称的间距。
但是,您可以使用边框图像或背景图像来解决问题。
border: dotted
的,但它是可以用梯度做到这一点作为Eagorajose的回答显示。
这使用标准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>
应用于带有大圆角的小元素可能会带来一些有趣的效果。
因此,从给出的答案开始,并应用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%是破折号的实际宽度。因此,可以在每个边界侧具有不同的长度短划线。
有关以下内容的可用值,请参见MDN文档border-style
:
- none:无边框,将宽度设置为0。这是默认值。
- hidden:与“ none”相同,除了在表格元素的边界冲突解决方面。
- 破折号:一系列短破折号或线段。
- 点:一系列点。
- double:两条直线加起来定义为边框宽度的像素量。
- 凹槽:雕刻效果。
- inset:使框显示为嵌入式。
- 开始:与“开始”相反。使框显示3D(浮雕)。
- 脊:“凹槽”的对面。边框出现3D(出来)。
- 实心:单条直线,实线。
除了这些选择之外,没有其他方法可以影响标准边框的样式。
如果您不喜欢这种可能性,则可以使用CSS3,border-image
但请注意,浏览器对此的支持仍然参差不齐。
根据@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>
这是一个古老但仍然非常相关的主题。在目前顶级的回答很好,但仅限于非常小的点工作。正如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
应与这些。
定义两个停止点时,圆点既美观又平滑:半径为一半的纯黑色,而不是整个半径的渐变。
这是一个确实很老的问题,但是在Google中排名很高,因此我将介绍一种可以根据您的需求使用的方法。
就我而言,我想要一个粗的虚线边框,使虚线之间的间隔最小。我使用了CSS模式生成器(像这样的一个:http : //www.patternify.com/)来创建10px宽x 1px高的模式。其中9px是纯破折号颜色,1px是白色。
在我的CSS中,我将该模式包含为背景图像,然后使用background-size属性将其放大。我最终得到20px x 2px的重复破折号,其中18px是实线,2px是白色。您可以将其放大甚至更多,以获得非常粗的虚线。
令人高兴的是,由于图像被编码为数据,因此您没有其他外部HTTP请求,因此没有性能负担。我将图片存储为SASS变量,因此可以在自己的网站中重复使用它。
简短的回答:不能。
您将必须使用border-image
属性和一些图像。
这么多人说“你不能”。是的你可以。的确,没有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如果需要,则需要调整颜色以满足您的需求。这也是水平线的一个小示例,请使用左和右制作垂直线。
我做了一个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>
如果您只针对现代浏览器,并且可以将边框与内容分开放置在单独的元素上,那么可以使用CSS比例转换获得更大的点或破折号:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
要使其对齐,需要进行大量的位置调整,但是它可以工作。通过更改边框的厚度,起始大小和比例因子,您可以达到所需的厚度与长度的比例。唯一无法触及的是破折号比例。
scale(8)
<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;"> </div>