Eu sunt, folosind punctate stilul de frontieră în cutia mea ca
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Vreau pentru a mări spațiul dintre fiecare punct de frontieră.
Acest truc funcționează atât pe orizontală și pe verticală frontiere:
/*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;
Puteți ajusta dimensiunea cu fundal-dimensiunea și proporția cu linear-gradient de procente. În acest exemplu am o linie punctată de 1px puncte și 2px spațiere. În acest fel puteți avea mai multe punctate de frontierele folosind mai multe medii.
Încercați să-l în acest [JSFiddle](
) sau de a lua o privire la fragmentul de cod, de exemplu: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>
Aici's un truc am'am folosit pe un proiect recent pentru a realiza aproape orice vreau cu orizontala frontiere. Eu folosesc <h/>
de fiecare dată când am nevoie de o frontieră orizontală. Modul de bază pentru a adăuga un chenar la această oră este ceva de genul
hr {border-bottom: 1px dotted #000;}
Dar dacă doriți să preia controlul de frontieră și, de exemplu, creșterea, spațiul dintre puncte, s-ar putea încerca ceva de genul asta:
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
Și în următoarele, vă creați frontieră (de aici's un exemplu cu puncte)
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
Acest lucru înseamnă, de asemenea, că puteți adăuga text-shadow la puncte, degradeuri etc. Orice vrei...
Ei bine, functioneaza foarte mare pentru orizontală frontiere. Dacă aveți nevoie de cele verticale, se poate specifica o clasa pentru un alt hr și de a folosi CSS3 "rotație" de proprietate.
Nu poți face asta cu pure CSS - CSS3 spec are chiar un citat despre acest lucru:
Notă: nu Există nici un control asupra distanța dintre puncte și linii, nici pe lungimea de linii. Implementări sunt încurajați să aleagă o spațiere care face colțuri simetrice.
Cu toate acestea, puteți utiliza fie un border-image sau o imagine de fundal care face truc.
Acesta utilizează standardul CSS frontieră și un pseudo-element+overflow:ascuns. În exemplul ai trei diferite 2px punctată frontiere: normal, distanțate ca un 5px, distanțate ca un 10px. Este de fapt 10px doar cu 10-8=2px vizibile.
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>
Aplicate la elemente mici cu colturi rotunjite se poate face pentru unele efecte amuzante.
Vezi MDN docs pentru valorile disponibile pentru border-style`:
- nici unul : Nu există frontieră, stabilește lățimea de la 0. Aceasta este valoarea implicită.
- ascunse : la Fel ca 'nu', cu excepția cazului în termeni de conflictul de la granița de rezoluție pentru masa elemente.
- punctată : Seria de scurt linii sau segmente de linie.
- punctate : Serie de puncte.
- dublu : Două drepte linii care se adaugă până la pixel suma definit ca border-width.
- groove : Sculptate efect.
- insertie : Face cutia apar încorporat.
- început : Vizavi de 'insertie'. Face caseta de par 3D (în relief).
- creasta : Vizavi de 'groove'. Chenarul apare 3D (iese).
- solide : Single, drept, solid line.
În afară de aceste alegeri, nu există nici o modalitate de a influența standard de frontieră's de stil.
Dacă posibilitățile nu sunt pe placul tău, te ar putea utilizarea CSS3's border-image
dar, rețineți că browser-ul de sprijin pentru acest lucru este încă foarte plină de coșuri.
Așa că, începând cu răspunsul dat și aplicarea faptul că CSS3 permite mai multe setări - codul de mai jos este util pentru a crea o cutie complet:
#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>
Sale de remarcat faptul că 10px în fundal, dimensiunea oferă zonă bord și diferența se va acoperi. 50% din fondul tag-ul este cât de larg bord este de fapt. Prin urmare, este posibil să aibă lungimi diferite linii pe fiecare graniță parte.
Aceasta este o întrebare veche, dar are un rang înalt în Google așa că am'm de gând să arunce în metoda mea care ar putea lucra în funcție de nevoile dumneavoastră.
În cazul meu, am vrut o grosime punctată de frontieră, care a avut o pauza de minim între linii. Am folosit un CSS model de generator (cum ar fi asta: http://www.patternify.com/) pentru a crea un 10px largă de 1px înalt model. 9px de care este solid strop de culoare, 1px este de culoare albă.
În CSS, am inclus acest model ca imagine de fundal, și apoi scalate în sus cu ajutorul fundal-dimensiunea atribut. Am ajuns cu o 20px de 2px repetate de bord, 18px de faptul că, fiind linie solidă și 2px alb. Ai putea să o scară chiar mai mult pentru o grosime linie punctată.
Cel mai frumos lucru este că imaginea este codată ca datele nu't trebuie suplimentare în afara cerere HTTP, deci nu's de performanță nu povară. Am păstrat imaginea mea ca SASS variabilă, așa că am putea reutiliza în site-ul meu.
Acesta este un vechi, dar încă foarte relevante subiect. Actuala răspunsul top](https://stackoverflow.com/a/18064496/2286722) funcționează bine, dar numai pentru foarte mic de puncte. Ca Bhojendra Rauniyar subliniat deja în comentarii, mai mari (>2px) puncte, punctele apar pătrate, nu rotunde. Am gasit aceasta pagina de cautare pentru distanțate dots, nu distanțate squares (sau chiar linii, ca niste raspunsuri utilizare).
Pe această bază, am folosit radial gradient
. De asemenea, folosind răspunsul la Ukuser32, dot-proprietăți pot fi ușor repetate pentru toate cele patru frontiere. Numai colțuri nu sunt perfecte.
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>
Anii radial gradient
așteaptă:
Aici, am vrut un 5 pixeli diametru (2.5 px raza) dot, cu de 2 ori diametrul (10px) între puncte, adăugând până la 15px. Background-size
ar trebui să se potrivesc cu acestea.
Cele două stații sunt definite astfel că punctul este frumos și neted: negru solid pentru o jumătate de raza și decât un gradient raza completă.
Atât de mulți oameni se spune "Nu poate't". Da, se poate. L'e adevărat că nu există o regulă css pentru a controla jgheab spațiu între linii, dar css are alte abilitati. Don't fi atât de rapid pentru a spune că un lucru nu poate fi făcut.
.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%;
}
Practic, de frontieră-top înălțime (5px în acest caz) este regula care determină jgheab "lățime". OIf desigur, ar fi nevoie să reglați culorile pentru a se potrivi nevoilor dumneavoastră. Acest lucru este, de asemenea, un mic exemplu pentru o linie orizontală, utilizarea stânga și la dreapta pentru a face linia verticală.
DACA're, vizând doar browserele moderne, ȘI puteți avea de frontieră pe un element separat de conținutul dvs., atunci puteți folosi CSS scară transforma pentru a obține o mai mare punct sau de cratimă:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
Este nevoie de o mulțime de poziție tweaking pentru a ajunge la linia de sus, dar funcționează. Prin schimbarea grosimii de frontieră, începând de dimensiunea și factorul de scară, puteți obține doar despre grosime-lungime raportul vrei. Singurul lucru ce se poate't touch este dash-pentru diferența de raport.
Cladire 4 margini soluția bazându-se pe @Eagorajose's a răspunde cu prescurtare sintaxa:
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>
Am facut o funcție javascript pentru a crea puncte cu o svg. Puteți ajusta punct de spațiere și dimensiune în cod 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>
<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>
aceasta este ceea ce am făcut - utilizați o imagine introduceți descrierea imaginii aici