我在我的盒子里使用了点状的边框,如
.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间距的虚线。 这样一来,你也可以使用多种背景来拥有多个点状边框。
在这个[JSFiddle](
)中尝试一下,或者看看代码片段的例子。<!--开始片段。 js hide: true -->
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>
<!--结束片段-->
这里有一个技巧,我'在最近的一个项目中使用,以实现几乎任何我想要的水平边框。
每次我需要水平边框时,我都会使用<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*/
}
这也意味着,你可以添加文字阴影的点,渐变等。 任何你想要的东西...
好吧,它对水平边框的效果非常好,如果你需要垂直边框,你可以为另一个小时指定一个类,并使用CSS3rotation。 如果你需要垂直的,你可以指定一个类的另一个小时,并使用CSS3
rotation`属性。
用纯CSS是做不到的--[CSS3规范][1]中甚至有专门的引用。
注意,你无法控制点和破折号的间距,也无法控制其长度。 不能控制点和破折号的间距,也不能控制破折号的长度。 我们鼓励实现者选择一个能使角对称的间距。
但是,您可以使用[border-image][2]或背景图片来实现。
[1]: http://www.w3.org/TR/css3-background/#the-border-style [2]: http://www.guyroutledge.co.uk/blog/better-dotted-borders-with-border-image/
这使用了标准的CSS边框和一个伪元素+overflow:hidden。 在这个例子中,你会得到三种不同的2px虚线边框。 正常,间隔为5px,间隔为10px。 实际上是10px,只有10-8=2px可见。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
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>
<!--结束片段-->
应用于大圆角的小元素,可能会产生一些有趣的效果。
关于`border-style'的可用值,请参见MDN docs。
- none : 没有边框,设置宽度为0。 这是默认值。
- hidden : 与'none'相同,只是在 的边框冲突解决。 元素的边框冲突。
- 虚线 : 一系列的短 破折号或线段。
- 虚线 : 点状的。 一系列的小圆点。
- double : 两条直线 两条直线加起来的像素量 定义为边界宽度。
- groove : 凹槽。 雕刻的效果。
- 嵌入:使方框 出现嵌入。
- 开始 : 与 "嵌入 "相反。 'inset'。使盒子看起来是三维的 (浮雕)。
- 棱线:与 '槽'。边界看起来是3D的 (出来的)。)
- solid : 单一的。 直线、实线。
除了这些选择之外,没有办法影响标准边框的风格。
如果那里的可能性不符合你的要求,你可以使用CSS3的border-image
,但要注意,浏览器对它的支持仍然很不稳定。
因此,从给出的答案开始,并应用CSS3允许多种设置的事实--下面的代码对于创建一个完整的盒子是有用的。
<!--开始片段。 js hide: false console: true babel: false -->
#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给出了dash和gap将覆盖的区域。 背景标签的50%是破折号的实际宽度。 因此,可以在每个边框边上设置不同长度的破折号。
这是一个很老的问题,但它在谷歌有很高的排名,所以我'要扔在我的方法,这可能会根据你的需求工作。
在我的案例中,我想要一个厚厚的虚线边框,在虚线之间有一个最小的中断。 我使用了一个CSS模式生成器(比如这个。 http://www.patternify.com/)来创建一个10px宽1px高的图案。 其中9px是纯色的虚线,1px是白色。
在我的CSS中,我将该图案作为背景图片,然后通过使用背景尺寸属性将其放大。 我最终得到了一个20px乘2px的重复破折号,其中18px是实线,2px是白色。 你可以把它放大更多,以获得真正粗壮的虚线。
好处是由于图像被编码为数据,你没有额外的外部HTTP请求,所以没有性能负担。 我把我的图像存储为一个SASS变量,这样我就可以在我的网站中重复使用它。
这是个老话题,但还是很有意义。 当前置顶答案效果不错,但只适用于很小的点。 正如Bhojendra Rauniyar已经在评论中指出的那样,对于较大的(>2px)点,点看起来是方形的,而不是圆形的。 我发现这个页面搜索的是间隔的_点,而不是间隔的_方(甚至是破折号,这里有些答案使用的)。
在此基础上,我使用了radial-gradient
。
另外,使用Ukuser32的答案,可以很容易地对所有四个边界重复使用点属性。
只有角落不完美。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
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.5px)的点,点与点之间的直径为2倍(10px),加起来为15px。
background-size
应该与这些相匹配。
这两个停顿的定义是为了使点子漂亮而平滑。 半径为纯黑色,全半径为渐变色。
所以很多人都在说"你可以&39;不可以"。 是的,你可以。 的确'是没有一个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%;
}
基本上border-top高度(本例中为5px)是决定沟槽"宽度"的规则。 OIf当然你需要调整颜色来配合你的需求。 这也是一个横线的小例子,用左右来做竖线。
根据@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 */
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
#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>
<!--结束片段-->
我做了一个javascript函数来创建svg的点。 你可以在javascript代码中调整点的间距和大小。
<!--开始片段。 js hide: false console.true babel: true true babel: false -->
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>
<!--结束片段-->
<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>
这就是我所做的--使用图像 [在此输入图像描述][1]