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

J’utilise la bordure en pointillé dans ma boite comme

.box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } 

Je veux augmenter l’espace entre chaque sharepoint la frontière.

    Cette astuce fonctionne pour les frontières 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 d’espacement 2px. De cette façon, vous pouvez avoir plusieurs bordures en pointillés en utilisant plusieurs arrière-plans.

    Essayez-le dans ce JSFiddle ou jetez un coup d’oeil à l’exemple 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; } 
     
    no
    border
    dotted
    border
    dotted
    with gradient
    dotted
    spaced
    no
    border
    dotted
    border
    dotted
    with gradient
    dotted
    spaced

    Voici un truc que j’ai utilisé sur un projet récent pour réaliser presque tout ce que je veux avec des bordures horizontales. J’utilise


    chaque fois que j’ai besoin d’une bordure horizontale. Le moyen de base pour append une bordure à cette heure est quelque chose comme

      hr {border-bottom: 1px dotted #000;} 

    Mais si vous voulez prendre le contrôle de la bordure 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 append une ombre de texte aux points, aux dégradés, etc. Tout ce que vous voulez …

    Eh bien, cela fonctionne vraiment bien pour les frontières horizontales. Si vous avez besoin de verticales, vous pouvez spécifier une classe pour une autre heure et utiliser la propriété de rotation CSS3.

    Vous ne pouvez pas le faire avec du CSS pur – la spécification CSS3 contient même une citation spécifique à ce sujet:

    Note: Il n’y a pas de 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ésortingques.

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

    Consultez les documents MDC pour connaître les valeurs disponibles pour border-style :

    • none: pas de bordure, définit la largeur sur 0. Il s’agit de la valeur par défaut.
    • hidden: Identique à ‘none’, sauf en termes de résolution des conflits de frontière pour les éléments de table.
    • en pointillés: série de tirets courts ou de segments de ligne.
    • pointillé: série de points.
    • double: Deux lignes droites qui correspondent à la quantité de pixels définie comme largeur de bordure.
    • groove: effet sculpté.
    • encart: fait apparaître la boîte incorporée.
    • Début: En face de ‘encart’. Fait apparaître la boîte en 3D (en relief).
    • crête: opposée à la rainure. La bordure apparaît 3D (sortant).
    • solide: ligne simple, droite et solide.

    En dehors de ces choix, il n’y a aucun moyen d’influencer le style standard de la frontière.

    Si les possibilités ne vous conviennent pas, vous pouvez utiliser border-image de CSS3 mais notez que la prise en charge du 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 en pointillés 2px différentes: normale, espacée comme un 5px, espacée comme un 10px. Est en fait 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; } 
     
    Kupo nuts here
    Kupo nuts
    here
    Kupo
    nuts
    here
    Kupo
    nuts
    here

    C’est une question vraiment ancienne mais elle a un rang élevé dans Google, donc je vais me lancer dans une méthode qui pourrait fonctionner selon vos besoins.

    Dans mon cas, je voulais une bordure épaisse en pointillé qui avait une pause 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 motif de 10 x largeur par 1 x hauteur. 9px de ce sont des couleurs unies, 1px est blanc.

    Dans mon CSS, j’ai inclus ce modèle en tant qu’image d’arrière-plan, puis je l’ai amélioré en utilisant l’atsortingbut background-size. Je me suis retrouvé avec un tiret répété de 20px par 2px, 18px de ce trait étant en trait plein et 2px en blanc. Vous pouvez le faire évoluer encore plus pour une ligne pointillée très épaisse.

    Ce qui est intéressant, c’est que l’image est encodée sous forme de données, vous n’avez pas la requête HTTP externe supplémentaire, donc il n’y a pas de charge de travail. J’ai stocké mon image en tant que variable SASS afin de pouvoir la réutiliser sur mon site.

    Réponse courte: Vous ne pouvez pas.

    Vous devrez utiliser border-image propriété border-image et quelques images.

    Si vous ne ciblez que les navigateurs modernes ET que vous pouvez placer votre bordure sur un élément distinct de votre contenu, vous pouvez utiliser la transformation de l’é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 le mettre en ligne, mais ça marche. En modifiant l’épaisseur de la bordure, la taille de départ et le facteur d’échelle, vous pouvez atteindre le rapport épaisseur-longueur souhaité. La seule chose que vous ne pouvez pas toucher est le ratio tiret sur écart.

    Tant de gens se disent “tu ne peux pas”. Oui, vous pouvez. Il est vrai qu’il n’y a pas de règle CSS pour contrôler l’espace 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 supérieure (5px dans ce cas) est la règle qui détermine la “largeur” ​​de la gouttière. Bien sûr, vous devrez ajuster les couleurs en fonction de vos besoins. Ceci est aussi un petit exemple pour une ligne horizontale, utilisez la gauche et la droite pour faire la ligne verticale.

    Donc, en commençant par la réponse donnée et en appliquant le fait que CSS3 autorise plusieurs parameters, 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; } 
     
    bordered area

    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 il est impossible d’obtenir plus de points espacés avec CSS.

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