Comment augmenter l'espace entre les points de bordure en pointillés

J'utilise une bordure de style 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 bordure.

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 d'arrière-plan et la proportion avec les pourcentages de gradient linéaire. Dans cet exemple, j'ai une ligne pointillée de points 1px et un espacement de 2px. De cette façon, vous pouvez également avoir plusieurs bordures en pointillés en utilisant plusieurs arrière-plans.

Essayez-le dans ce JSFiddle ou jetez un œil à 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 une astuce que j'ai utilisée sur un projet récent pour réaliser presque tout ce que je veux avec des bordures horizontales. J'utilise <hr/>chaque fois que j'ai besoin d'une bordure horizontale. La façon 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 ce qui suit, 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 du texte-ombre aux points, dégradés, etc. Tout ce que vous voulez ...

Eh bien, cela fonctionne vraiment bien pour les bordures horizontales. Si vous en avez besoin, vous pouvez spécifier une classe pour une autre heure et utiliser la rotationpropriété CSS3 .

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 coins symétriques.

Vous pouvez cependant utiliser une image de bordure ou une image d'arrière-plan qui fait l'affaire.

Celui-ci utilise la bordure CSS standard et un pseudo élément + débordement: caché. Dans l'exemple, vous obtenez trois bordures en pointillés 2px différentes: normales, espacées comme un 5px, espacées comme un 10px. Est en fait 10px avec seulement 10-8 = 2px visibles.

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, cela peut créer des effets amusants.

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 convient de noter que la taille de 10 pixels de l'arrière-plan donne la zone que le tiret et l'écart couvriront. Le 50% de la balise d'arrière-plan est la largeur réelle du tiret. Il est donc possible d'avoir des tirets de longueur différente de chaque côté de la bordure.

Voir les documents MDN pour les valeurs disponibles pour border-style:

• none: aucune bordure, définit la largeur à 0. Il s'agit de la valeur par défaut.
• masqué: identique à «aucun», sauf en termes de résolution des conflits de frontière pour les éléments du tableau.
• en pointillés: série de tirets courts ou de segments de ligne.
• pointillé: série de points.
• double: deux lignes droites qui totalisent la quantité de pixels définie comme largeur de bordure.
• groove: effet sculpté.
• encart: fait apparaître la boîte intégrée.
• début: opposé à «encart». Fait apparaître la boîte en 3D (en relief).
• crête: opposée à «rainure». La bordure apparaît en 3D (sortant).
• solide: ligne simple, droite et continue.

En dehors de ces choix, il n'y a aucun moyen d'influencer le style de la bordure standard.

Si les possibilités ne sont pas à votre goût, vous pouvez utiliser CSS3 border-imagemais notez que la prise en charge du navigateur pour cela est encore très inégale.

Construire 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>

C'est un sujet ancien, mais toujours très pertinent. La première réponse actuelle fonctionne bien, mais uniquement pour les très petits points. Comme Bhojendra Rauniyar l'a déjà souligné dans les commentaires, pour les points plus grands (> 2px), les points apparaissent carrés, pas ronds. J'ai trouvé cette page en recherchant des points espacés , pas des carrés espacés (ou même des tirets, comme certaines réponses ici utilisent).

Sur cette base, j'ai utilisé radial-gradient. En outre, en utilisant la réponse de Ukuser32 , les propriétés de point peuvent facilement être 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>

L' radial-gradient attend :

• la forme et la position optionnelle
• deux arrêts ou plus: une couleur et un rayon

Ici, je voulais un point de 5 pixels de diamètre (2,5 pixels de rayon), avec 2 fois le diamètre (10 pixels) entre les points, totalisant jusqu'à 15 pixels. Le background-sizedevrait correspondre à ceux-ci.

Les deux arrêts sont définis de telle sorte que le point est agréable et lisse: noir uni pour la moitié du rayon et qu'un dégradé pour le rayon complet.

C'est une très vieille question mais elle a un rang élevé dans Google, donc je vais ajouter ma méthode qui pourrait fonctionner en fonction de vos besoins.

Dans mon cas, je voulais une bordure en pointillés épaisse qui avait une pause minimale entre les tirets. J'ai utilisé un générateur de motifs CSS (comme celui-ci: http://www.patternify.com/ ) pour créer un motif de 10 pixels de large par 1 px de haut. 9 pixels sont de couleur unie, 1 pixel est blanc.

Dans mon CSS, j'ai inclus ce modèle en tant qu'image d'arrière-plan, puis je l'ai mis à l'échelle en utilisant l'attribut background-size. Je me suis retrouvé avec un tiret répété de 20 pixels par 2 pixels, dont 18 pixels en trait plein et 2 pixels blancs. Vous pouvez le redimensionner encore plus pour une ligne pointillée très épaisse.

La bonne chose est que l'image est codée en tant que données, vous n'avez pas la demande HTTP externe supplémentaire, donc il n'y a pas de charge de performance. J'ai stocké mon image en tant que variable SASS afin de pouvoir la réutiliser dans mon site.

Réponse courte: vous ne pouvez pas.

Vous devrez utiliser la border-imagepropriété et quelques images.

Tant de gens disent "Vous ne pouvez pas". Oui, vous pouvez. Il est vrai qu'il n'y a 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 rapide à dire qu'une chose ne peut pas ê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 du bord supérieur (5px dans ce cas) est la règle qui détermine la "largeur" ​​de la gouttière. Si vous devez bien sûr ajuster les couleurs en fonction de vos besoins. C'est aussi un petit exemple pour une ligne horizontale, utilisez gauche et droite pour faire la ligne verticale.

J'ai fait 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>

SI vous ne ciblez que les navigateurs modernes ET que 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 réglages 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 à peu près le rapport épaisseur-longueur souhaité. La seule chose que vous ne pouvez pas toucher est le rapport tiret-écart.

<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;">&nbsp;</div>

c'est ce que j'ai fait - utilisez une image entrez la description de l'image ici

AFAIK il n'y a pas moyen de le faire. Vous pouvez utiliser une bordure en pointillés ou peut-être augmenter légèrement la largeur de la bordure, mais obtenir des points plus espacés est impossible avec CSS.

Vous pouvez créer une toile (via javascript) et dessiner une ligne pointillée à l'intérieur. Dans le canevas, vous pouvez contrôler la durée du tiret et l'espace entre les deux.