Rayon de contour ?

Question

Est de toute façon d’obtenir des coins arrondis sur le contour d’un élément, similaire aux ?

Answer 1

Vieille question maintenant, mais cela pourrait être pertinent pour quelqu'un avec un problème similaire. J’ai eu un champ de saisie avec arrondi et je voulais changer la couleur du contour de la mise au point. Je ne pouvais pas dompter la place horrible au contrôle d’entrée.

Donc au lieu de cela, j’ai utilisé box-shadow. Effectivement, j’ai préféré l’aspect lisse de l’ombre, mais l’ombre peut être durcie pour simuler un contour arrondi :

Answer 2

J’ai ce faire habituellement à l’aide de la : après pseudo-élément : http://jsfiddle.net/6QUhf/

bien sûr cela dépend de son utilisation, cette méthode permet de contrôler de frontières individuels, plutôt que d’utiliser la méthode de l’ombre.

vous pourriez également définir - 1px décalages et utiliser un fond dégradé linéaire (sans bordure) pour un effet différent une fois de plus.

Answer 3

Similaire à Lea Hayes au-dessus, mais ici est comment je l’ai fait :

Aucune imbrication de balises div ou jQuery nécessaire, bien que par souci de concision, j’ai laissé sortir les variantes - moz et - webkit de certains de la CSS. Vous pouvez visualiser le résultat à http://jsfiddle.net/Zq8XU/

Answer 4

Vous êtes à la recherche de quelque chose comme cela, je pense.

div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

---

Modifier

Il y a un Firefox uniquement -moz-outline-radius correctement, mais qui ne fonctionne pas sur IE/Chrome/Safari/Opera/etc. Donc il semble que la plupart de la croix-navigateur compatible^* pour obtenir une ligne incurvée autour d'une frontière est d'utiliser un wrapper div:

HTML

<div class="outer"><div class="inner"></div></div>

CSS

div.inner {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

div.outer {
    display: inline-block;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid red;
}

Démo 2

---

^{*part en utilisant des images}

Answer 5

Je sais ce qu'il signifie...

Si vous souhaitez obtenir un relief regard que vous pourriez faire quelque chose comme ce qui suit:

http://jsfiddle.net/xxCT8/

il est à la recherche d'un moyen d'avoir ce travail dans d'autres navigateurs.. pas de travail autour de ce que j'ai trouvé, mais quelqu'un d'autre a quelque chose?

EDIT: La seule autre façon vous pouvez faire est d'utiliser le box-ombre, mais alors cela ne marchera pas si vous avez déjà une zone d'ombre sur cet élément.