Comment augmenter l'espace entre les points de bordure en pointillés
J'utilise une bordure en pointillé dans ma boîte comme
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Je veux augmenter l'espace entre chaque point de la frontière.
Cette astuce fonctionne pour les bordures horizontales et verticales:
/*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;
Vous pouvez ajuster la taille avec la taille de l'arrière-plan et la proportion avec les pourcentages de dégradé linéaire. Dans cet exemple, j'ai une ligne pointillée de points 1px et d'espacement 2px .. Cela permet de créer plusieurs bordures en pointillés avec plusieurs arrière-plans.
Essayez-le dans ce JSFiddle ou regardez l'exemple d'extrait de code:
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>Voici un truc que j'ai utilisé sur un projet récent pour réaliser presque tout ce que je veux avec les bordures horizontales. J'utilise <hr/> chaque fois que j'ai besoin d'une bordure horizontale. La méthode de base pour ajouter une bordure à cette heure est quelque chose comme:
hr {border-bottom: 1px dotted #000;}
Mais si vous voulez prendre le contrôle de la frontière et, par exemple, augmenter l'espace entre les points, vous pouvez essayer quelque chose comme ceci:
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
Et dans la suite, vous créez votre bordure (voici un exemple avec des points)
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
Cela signifie également que vous pouvez ajouter une ombre de texte aux points, aux dégradés, etc. Tout ce que vous voulez ...
Cela fonctionne très bien pour les bordures horizontales. Si vous avez besoin de classes verticales, vous pouvez spécifier une classe pour une autre heure et utiliser la propriété CSS3 rotation.
Vous ne pouvez pas le faire avec du CSS pur - la spécification CSS3 a même une citation spécifique à ce sujet:
Remarque: il n'y a aucun contrôle sur l'espacement des points et des tirets, ni sur la longueur des tirets. Les implémentations sont encouragées à choisir un espacement qui rend les angles symétriques.
Vous pouvez cependant utiliser soit une image de bordure ou une image d’arrière-plan qui fait l'affaire.
Voir MDN docs pour les valeurs disponibles pour border-style:
- none: pas de bordure, définit la largeur sur 0 . Ceci est la valeur par défault.
- hidden: Identique à 'none', sauf en termes de résolution des conflits à la frontière pour la table éléments.
- en pointillés: série de courts des tirets ou des segments de ligne.
- en pointillé: Série de points.
- double: deux droites lignes qui s'additionnent à la quantité de pixels défini comme la largeur de la bordure.
- rainure : Effet sculpté.
- encart: Rend la boîte semble intégré.
- départ: en face de «encart». Fait apparaître la boîte en 3D (en relief).
- crête: en face de 'rainure'. La bordure apparaît en 3D (sortir).
- solide: unique, ligne droite, continue.
En dehors de ces choix, il n'y a aucun moyen d'influencer le style de la frontière standard.
Si les possibilités ne vous conviennent pas, vous pouvez utiliser le border-image de CSS3, mais notez que la prise en charge par le navigateur est encore très inégale.
Cela utilise la bordure CSS standard et un pseudo-élément + overflow: hidden . Dans l'exemple, vous obtenez trois bordures pointillées différentes de 2 pixels: normales, espacées comme un 5 pixels, espacées comme un 10 pixels. Est-ce réellement 10px avec seulement 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>Appliqué à de petits éléments avec de grands coins arrondis peut donner des effets amusants.
C'est une question très ancienne, mais Google occupe une place importante dans le classement. Je vais donc vous présenter ma méthode qui pourrait fonctionner en fonction de vos besoins.
Dans mon cas, je voulais une bordure épaisse en pointillé qui permette une séparation minimale entre les tirets. J'ai utilisé un générateur de modèles CSS (comme celui-ci: http://www.patternify.com/ ) pour créer un modèle de 10 pixels de large par 1 pixel de haut. 9px de cela est couleur de tiret solide, 1px est blanc.
Dans mon CSS, j'ai inclus ce motif en tant qu'image d'arrière-plan, puis mis à l'échelle à l'aide de l'attribut background-size. Je me suis retrouvé avec un tiret répété 20px par 2px, dont 18px sont en trait plein et 2px en blanc. Vous pouvez l’agrandir encore davantage pour obtenir une ligne pointillée très épaisse.
Ce qui est bien, c’est que, étant donné que l’image est codée en tant que données, vous n’avez pas de requête HTTP externe supplémentaire, ce qui évite toute perte de performances. J'ai stocké mon image en tant que variable SASS afin de pouvoir la réutiliser sur mon site.
Donc, en commençant par la réponse donnée et en appliquant le fait que CSS3 autorise plusieurs paramètres, le code ci-dessous est utile pour créer une boîte complète:
#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>Il est intéressant de noter que les 10 pixels de la taille de l’arrière-plan donnent la zone que le tiret et l’espace couvriront. Les 50% de la balise d'arrière-plan correspondent à la largeur du tiret. Il est donc possible d’avoir des tirets de différentes longueurs de chaque côté de la bordure.
Tant de gens se disent "tu ne peux pas". Oui, vous pouvez. Il est vrai qu’il n’existe pas de règle CSS pour contrôler l’espace de gouttière entre les tirets, mais CSS a d’autres capacités. Ne soyez pas si prompt à dire qu'une chose ne peut être faite.
.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%;
}
Fondamentalement, la hauteur de la bordure (5px dans ce cas) est la règle qui détermine la "largeur" de la gouttière. Bien entendu, vous devrez ajuster les couleurs pour répondre à vos besoins. Ceci est également un petit exemple pour une ligne horizontale, utilisez gauche et droite pour créer la ligne verticale.
Réponse courte: vous ne pouvez pas.
Vous devrez utiliser border-image property et quelques images.
SI vous ne ciblez que les navigateurs modernes ET si vous pouvez avoir votre bordure sur un élément distinct de votre contenu, vous pouvez utiliser la transformation d'échelle CSS pour obtenir un point ou un tiret plus grand:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
Il faut beaucoup de peaufinage de position pour l'aligner, mais cela fonctionne. En modifiant l'épaisseur de la bordure, la taille de départ et le facteur d'échelle, vous pouvez obtenir le rapport épaisseur/longueur souhaité. La seule chose que vous ne pouvez pas toucher est le rapport tiret/espace.
C'est un sujet ancien, mais toujours très pertinent. La réponse actuelle la plus récente } _ fonctionne bien, mais uniquement pour les très petits points. Comme Bhojendra Rauniyar l'a déjà souligné dans les commentaires, pour les plus gros points (> 2 pixels), les points apparaissent carrés, pas ronds. J'ai trouvé cette page à la recherche de dots espacés, pas de carrés (ou même de tirets, comme certaines réponses l'utilisent).
Sur cette base, j'ai utilisé radial-gradient. De plus, en utilisant la réponse de Ukuser32 , les propriétés de point peuvent être facilement répétées pour les quatre bordures. Seuls les coins ne sont pas parfaits.
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>Le radial-gradientattend } _:
- la forme et facultatif position
- deux arrêts ou plus: une couleur et un rayon
Ici, je voulais un point de 5 pixels de diamètre (2,5px de rayon), avec 2 fois le diamètre (10px) entre les points, soit 15px. Le background-size devrait correspondre à ceux-ci.
Les deux arrêts sont définis de telle sorte que le point soit joli et lisse: noir uni pour la moitié du rayon et dégradé au rayon complet.
Vous pouvez créer une toile (via javascript) et tracer une ligne en pointillé à l'intérieur. Dans le canevas, vous pouvez contrôler la longueur du tiret et de l’espace entre eux.
Création d'une solution à 4 arêtes basée sur la réponse de @ Eagorajose avec une syntaxe abrégée
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>J'ai créé une fonction javascript pour créer des points avec un svg. Vous pouvez ajuster l'espacement et la taille des points dans le code 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>Autant que je sache, il n'y a pas moyen de faire cela. Vous pouvez utiliser une bordure en pointillé ou peut-être augmenter légèrement la largeur de la bordure, mais obtenir plus de points espacés est impossible avec CSS.
<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>
c'est ce que j'ai fait - utiliser une image entrer la description de l'image ici