Comment augmenter l'espace entre la bordure pointillée points
Je suis à l'aide de pointillés style frontière dans ma boîte comme
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Je veux l'augmentation de l'espace entre chaque point de la frontière.
Vous devez vous connecter pour publier un commentaire.
Cette astuce fonctionne pour à la fois horizontale et verticale des frontières:
Vous pouvez ajuster la taille avec l'arrière-plan de la taille et de la proportion avec le dégradé linéaire des pourcentages. Dans cet exemple, j'ai une ligne en pointillés de 1px points et 2px espacement.
De cette façon, vous pouvez avoir plusieurs bordures en pointillés aussi l'utilisation de plusieurs horizons.
Essayer dans cette JSFiddle ou de prendre un coup d'oeil à l'exemple de fragment de code:
CSS:
HTML:
:after
définition.border:1px dashed black
) qui rend fichier seulement 40 ko de taille.radial-gradient
afin d'obtenir tour points. En outre, il peut être appliqué sur tous les quatre côtés/bords.Voici une astuce que j'ai utilisé sur un projet récent pour atteindre près tout ce que je veux avec l'horizontale frontières. J'utilise
<hr/>
chaque fois que j'ai besoin d'une bordure horizontale. La méthode de base pour ajouter une bordure à ce que les rh sont quelque chose commeMais si vous voulez prendre le contrôle de la frontière et, par exemple, l'augmentation, l'espace entre les points, vous pouvez essayer quelque chose comme ceci:
Et dans le suivant, vous créez votre frontière (voici un exemple avec les points)
Cela signifie également que vous pouvez ajouter du texte-de l'ombre aux points, dégradés, etc. Tout ce que vous voulez...
Bien, il fonctionne vraiment très bien à l'horizontale frontières. Si vous avez besoin d'verticale, vous pouvez spécifier une classe pour l'autre des rh et de l'utilisation du CSS3
rotation
propriété.hr {border: none; overflow: hidden; max-width: 1145px; /* or whatever you need */ width: 100%; }
border: 2px solid green
Vous ne pouvez pas le faire avec de la pure CSS - le CSS3 spec a même un devis précis à ce sujet:
Vous pouvez, cependant, utiliser un border-image ou une image de fond qui fait le tour.
border: dotted
, mais est possible de le faire en utilisant des gradients par Eagorajose la réponse de l'a montré.Il utilise la norme CSS frontière et un pseudo-élément+overflow:hidden.
Dans l'exemple, vous obtenez trois différents 2px dashed frontières: normal, espacés comme un 5px, espacés comme un 10px. Est en fait 10px avec seulement 10-8=2px visible.
CSS:
HTML:
Appliquée à de petits éléments avec de grands angles arrondis peut faire de certains des effets amusants.
Voir le MDN docs pour les valeurs disponibles pour
border-style
:En dehors de ces choix, il n'y a aucun moyen d'influencer la norme frontière du style.
Si les possibilités ne sont pas à votre goût, vous pourrait utiliser CSS3 est
border-image
mais notez que la prise en charge du navigateur pour ce qui est encore très inégale.Donc en commençant avec la réponse donnée et en appliquant le fait que le CSS3 permet de multiples paramètres - le code ci-dessous est utile pour la création d'une boîte complète:
CSS:
HTML:
Il est intéressant de noter que le 10px dans le fond de la taille de l'espace que le tableau de bord et l'écart se couvrir. Le 50% de la balise d'arrière-plan est la largeur du tableau de bord est en réalité. Il est donc possible d'avoir la longueur différente des tirets sur chaque côté de la frontière.
C'est une très vieille question, mais elle a un rang élevé dans Google, donc je vais me lancer dans ma méthode qui pourrait travailler en fonction de vos besoins.
Dans mon cas, je voulais une épaisse bordure pointillée qui avaient un minimum de repos entre les tirets. J'ai utilisé un CSS générateur de motif (comme celle-ci: http://www.patternify.com/) pour créer un 10px large par 1px de hauteur modèle. 9px de ce qui est solide dash couleur, 1px blanc.
Dans mon CSS, j'ai compris que le modèle que l'image d'arrière-plan, puis mis à l'échelle en utilisant le fond de la taille de l'attribut. J'ai fini avec un 20px par 2px répété tableau de bord, 18px de ligne solide et 2px blanc. Vous pourriez échelle encore plus pour une épaisseur vraiment la ligne pointillée.
La bonne chose est, car l'image est codée en tant que données que vous n'avez pas la supplémentaires à l'extérieur de la requête HTTP, donc il n'y a pas de performance fardeau. J'ai stocké mon image en tant que SASS variable afin que je puisse le réutiliser dans mon site.
C'est un vieux, mais toujours très à propos. Le actuellement en haut de réponse fonctionne bien, mais seulement pour les très petits points. Comme Bhojendra Rauniyar déjà souligné dans les commentaires, pour les plus grands (>2px) points, les points apparaissent carré, pas rond. J'ai trouvé cette page à la recherche pour espacés points, espacées carrés (ou même des tirets, comme des réponses ici de l'utilisation).
Sur cette base, j'ai utilisé
radial-gradient
. Aussi, à l'aide de la réponse de Ukuser32, la dot-propriétés peuvent facilement être répété pour tous les quatre frontières. Seuls les coins ne sont pas parfaits.CSS:
HTML:
La
radial-gradient
attend:Ici, j'ai voulu un de 5 pixels de diamètre (2.5 px rayon) dot, avec 2 fois le diamètre (10px) entre les points, en ajoutant jusqu'à 15px. Le
background-size
doivent correspondre à ces.Les deux arrêts sont définis tels que la dot est agréable et lisse: noir solide pour la moitié du rayon et qu'un dégradé à rayon complet.
Réponse courte: Vous ne pouvez pas.
Vous devrez utiliser
border-image
de la propriété et de quelques images.SI vous êtes seulement cibler les navigateurs modernes, ET vous pouvez avoir votre sur la frontière d'un élément à partir de votre contenu, vous pouvez utiliser le CSS transformation d'échelle pour obtenir un plus grand point ou un tiret:
Elle prend beaucoup de de position à peaufiner pour l'obtenir à la ligne, mais il fonctionne. En changeant l'épaisseur de la bordure, la taille de départ et le facteur d'échelle, vous pouvez obtenir à peu près l'épaisseur de la proportion de longueur que vous souhaitez. La seule chose que vous ne pouvez pas le toucher est le tiret-à-ratio de l'écart.
scale(8)
Beaucoup de personnes disent: "Vous ne pouvez pas". Oui, vous pouvez. C'est vrai qu'il n'est pas une règle css pour contrôler la gouttière de l'espace entre les tirets mais css a d'autres capacités. Ne soyez pas si prompts à dire qu'une chose ne peut pas être fait.
Fondamentalement la frontière-dessus de la hauteur (5px dans ce cas) est la règle qui détermine la gouttière "largeur". L'OIf bien vous avez besoin d'ajuster les couleurs pour correspondre à vos besoins. C'est aussi un petit exemple pour une ligne horizontale, utilisez les boutons gauche et droit pour faire de la ligne verticale.
Bâtiment de 4 arêtes de la solution en se basant sur @Eagorajose de réponse avec la sténographie de syntaxe:
CSS:
HTML:
Autant que je sache, il n'y a pas une façon de le faire. Vous pouvez utiliser une bordure pointillée ou peut-être augmenter la largeur de la bordure un peu, mais juste obtenir plus espacées points est impossible avec les CSS.
Vous pouvez créer une toile (via javascript) et tracez une ligne en pointillés à l'intérieur. À l'intérieur de la toile, vous pouvez contrôler combien de temps le tableau de bord et l'espace entre les deux doit être.
c'est ce que j'ai fait - l'utilisation d'une image
entrez la description de l'image ici