Comment créer une bordure rayonnée en pointillé avec css?

J'essaye de créer une frontière de rayon mais pas avec le style plein mais avec le style pointillé.Comment créer une bordure rayonnée en pointillé avec css?

Voici le demo qui est dans un style solide, mais je veux qu'il soit en style pointillé.

div{ 
    width: 200px; 
    height: 200px; 
    border: 2px dashed; 
    position: relative; 
} 
div:after{ 
    content: ""; 
    width: 25px; 
    height: 25px; 
    position: absolute; 
    z-index: 2; 
    top: 15px; 
    right: -29px; 
    border-top: 2px dashed; 
    border-left: 2px solid #fff; 
    border-right: 2px dashed; 
    border-bottom: 2px dashed; 
    border-radius: 0 25px 0 0; 
}

enter image description here

Mise à jour:

Il travaille en chrome et dire aussi, mais pas dans Firefox, et je suis en utilisant la version Firefox 28.

Source

2014-05-08 Bhojendra Nepal

il est déjà en pointillé, mec. – mayankcpdixit

vérifier pour après les pseudo-éléments :) –

salut, il est en pointillés seulement. voulez-vous dire en pointillé style .. s'il vous plaît vérifier le lien pour la démo http://jsfiddle.net/smey7/2/ – Renjith

Si votre petite boîte ne contient aucun contenu, vous pouvez utiliser un autre pseudo-élément pour créer un masque. DEMO

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 3; 
    top: 15px; 
    right: -29px; 
    border-radius:100%; 
    box-shadow:inset 0 0 0 5px white, 0 0 0 5px white;; 
    border:solid transparent 5px; 
}

En fait, il serait préférable de servir seulement cela aux navigateurs de Mozillas: DEMO

@-moz-document url-prefix() { 
    div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 3; 
    top: 15px; 
    right: -29px; 
    border-radius:100%; 
    box-shadow:inset 0 0 0 5px white, 0 0 0 5px white;; 
    border:solid transparent 5px; 
} 
}

Source

2014-05-08 10:25:41

Sinon, SVG fonctionnerait bien. –

Malheureusement, cela ressemble à un bug dans Firefox:

bugzilla 382721

Ce qui signifie que vous devrez utiliser une image ou quelque chose pour le faire paraître comme dans Chrome. Assez ennuyeux.

Essayez d'aller pour cette LNK http://www.css3.info/preview/border-image/

Notez que je ne peux pas garantir que ce soit, il est certainement possible d'obtenir l'effet désiré en utilisant la frontière image, mais il semble que cela pourrait être.

Source

2014-05-08 10:08:49 Woody

Essayez et fournissez des solutions pour cela. Pas la raison de son ne fonctionne pas. – SSS

Eh bien ma réponse à la question est que vous ne pouvez pas fournir un rayon de frontière en pointillé dans Firefox à cause de ce bug. C'est la réponse correcte à la question qui a été posée "Comment créer une bordure de rayon en pointillé juste avec css?". Je ne comprends pas ton problème. – Woody

Je n'ai eu aucun problème. :) Juste essayer d'aider notre ami coincé – SSS

Il est une limitation de Firefox. Chaque type d'angle arrondi ressemble à border-style:solid. Pour une meilleure compréhension, vous pouvez vérifier l'exemple this.

Source

2014-05-08 10:37:42

Comment créer une bordure rayonnée en pointillé avec css?

Répondre

Questions connexes