我在像我的盒子一样使用 do带边界。
.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;
You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing. This way you can have multiple dotted borders too using multiple backgrounds.
https://jsfiddle.net/yp67pbg/ 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>这里,我在最近一个项目中用了一个trick子,以达到我几乎想要的横向边界。 我每次需要横向边界时,都使用<代码><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*/
}
这还意味着,你可以给狗、梯度等添加文字影子。 你们想要的东西......
Well, it works really great for horizontal borders. If you need vertical ones, you may specify a class for another hr and use the CSS3 rotation property.
This uses the standard CSS border and a pseudo element+overflow:hidden. In the example you get three different 2px dashed borders: normal, spaced like a 5px, spaced like a 10px. Is actually 10px with only 10-8=2px visible.
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>Applied to small elements with big rounded corners may make for some fun effects.
因此,从所提供的答案开始,并适用CSS3允许多种环境的事实,以下守则有助于建立一个完整的方框:
#border {
width: 200px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, transparent 0%) top repeat-x,
linear-gradient(blue 50%, transparent 0%) right repeat-y,
linear-gradient(to right, green 50%, transparent 0%) bottom repeat-x,
linear-gradient(red 50%, transparent 0%) left repeat-y;
background-size: 10px 1px, 1px 10px;
}<div id="border">
bordered area
</div>值得注意的是,背景面积的10px使干线和差距覆盖地区。 50%的背景标签是,干.的实际深度如何。 因此,每个边界一侧可能有不同的长途。
见MDN docs关于<代码>的现成数值:
- none : No border, sets width to 0. This is the default value.
除了这些选择外,没有办法影响标准的边界风格。
如果您不考虑这些可能性,请 Border-image,但请注意,这方面的浏览器支持仍然非常显眼(
这是一个老问题,但仍然非常相关。 ,当值最高答案运转良好,但仅涉及很小的狗。 正如Bhojendra Rauniyar在评论中已经指出的,大面积(>2px)的 do看来是平方,而不是四舍五入。 我发现,这一页次的搜索空间为dots,而不是squares(或甚至如此处使用的一些答案)。
在此基础上,我使用了<代码>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>The radial-gradient expects:
在此,我想到5个六分之二直径(2.5px radius),两倍直径(10px),加起来达15px。 www.un.org/Depts/DGACM/index_french.htm 应与这些内容相匹配。
The two stops are defined such that the dot is nice and smooth: solid black for half the radius and than a gradient to the full radius.
Building 4 edges solution basing on @Eagorajose s answer with shorthand syntax:
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>这是一个真正的老问题,但在谷歌中排名很高,因此,在我的方法中,我可以视你们的需要开展工作。
在我的案件中,我想有一个厚颜色的达什边界,在达什之间的距离很小。 我使用了CSS模式生成器(例如:http://www.patternies.com/),以1px tall模式形成10px宽。 其中的9px是固体 d色,1px为白色。
在我的社保学会中,我把这种模式作为背景形象,然后通过利用背景特性加以扩大。 我最后用20px再用2px重复干ash,其中18px是固线,2px是白色。 你可以把它扩大至一个真正厚厚的 da线。
The nice thing is since the image is encoded as data you don t have the additional outside HTTP request, so there s no performance burden. I stored my image as a SASS variable so I could reuse it in my site.
许多人说“你可以 t”。 是的。 确实,没有控制木she之间的混凝土空间的奇迹规则,但 c具有其他能力。 说不能够做的事情,那是如此迅速的。
.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)是确定“宽度”的规则。 当然,你需要调整颜色,以满足你们的需要。 这也是横向界线、左边使用和垂直线权的一个小例子。
在我的案件中,我需要治愈玉米和边界 thin薄,以便我找到这一解决办法:
/* 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>想法是将这种模式推向要素后,只显示作为要素边界的界线。
简短回答: 你们能够这样做。
你们必须使用 Border-image property和少数图像。
IF you re only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: 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>
this is what I did - use an image enter image description here
我用刀子制造 do。 你们可以调整 j印法的大小。
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-with-bottom-border {
background-position: bottom;
background-size: 12px 2px;
background-repeat: repeat-x;
background-image: radial-gradient(circle, black 1px, white 1px);
}
You could create a canvas (via javascript) and draw a dotted line within. Within the canvas you can control how long the dash and the space in between shall be.
我们需要有圈子,这就是我们如何解决:
在需要“边界”作风的要件方面,这样做的多或少:
: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");
}
Here s a solution using CSS only with the use of a clip-path to mask the excess border. Unlike the most voted answer this allows for transparent backgrounds. You can also use get rounded borders by matching the clip-path round property to the border-radius.
.demo {
display: inline-flex;
width: 200px;
height: 100px;
position: relative;
clip-path: inset(0 round 30px 0 30px 0);
}
.demo::before {
content: ;
position: absolute;
left: -7px;
top: -7px;
right: -7px;
bottom: -7px;
border: 8px dashed rgba(0, 0, 255, 0.3);
border-radius: 37px 0 37px 0;
box-sizing: border-box;
}<div class="demo"></div>Here s a sass mixin for those interested
=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)
$corners:
@for $i from 1 through length($round)
$value: nth($round, $i)
@if $value != 0
$corners: unquote($corners + calc(#{$value} - #{$size}) + )
@else
$corners: unquote($corners + #{$value} + )
clip-path: inset(0 round $corners)
&::before
content:
position: absolute
left: - $size + $thickness
top: - $size + $thickness
right: - $size + $thickness
bottom: - $size + $thickness
border: $size dashed $color
border-radius: $round
box-sizing: border-box
AFAIK没有这样做的途径。 你们可以使用一条破碎的边界,或者也许会增加边界的宽度,但是,在安全局看来,仅仅得到更多的空洞是不可能的。
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!