Rayon de contour?

Y a-t-il de toute façon des coins arrondis sur le contour d’un div element , similaire au border-radius ?

Ancienne question maintenant, mais cela pourrait être pertinent pour quelqu’un avec un problème similaire. J’avais un champ de saisie avec une border arrondie et je voulais changer la couleur du contour de la mise au point. Je ne pouvais pas apprivoiser le outline carré horrible au contrôle de saisie.

Donc, à la place, j’ai utilisé l’ombre des boîtes. J’ai préféré l’aspect lisse de l’ombre, mais l’ombre peut être durcie pour simuler un contour arrondi:

 /* Smooth outline with box-shadow: */ input[type=text]:focus { box-shadow: 0 0 3pt 2pt red; } /* Hard "outline" with box-shadow: */ input[type=text]:focus { box-shadow: 0 0 0 2pt red; } 

J’accomplis habituellement ceci en utilisant le pseudo-élément: après: http://jsfiddle.net/6QUhf/

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

Vous pouvez également définir des décalages de -1px et utiliser un dégradé linéaire d’arrière-plan (sans bordure) pour un effet différent une fois de plus.

 a{ background: #999 ; padding: 10px 20px ; border-radius: 5px ; text-decoration: none ; color: #fff ; position: relative ; border: 2px solid #000 ; } a:after{ content: '' ; display: block ; position: absolute ; top: 0 ; bottom: 0 ; left: 0 ; right: 0 ; border-radius: 5px ; border: 2px solid #ccc ; } 

Semblable à Lea Hayes ci-dessus, mais voici comment je l’ai fait:

 div { background: #999; height: 100px; width: 200px; border: #999 solid 1px; border-radius:10px; margin: 15px; box-shadow: 0px 0px 0px 1px #fff inset; } 

Pas d’imbrication de DIV ou de jQuery nécessaire, mais pour des raisons de concision, j’ai omis les variantes -moz et -webkit de certaines CSS. Vous pouvez voir le résultat sur http://jsfiddle.net/Zq8XU/

Vous cherchez quelque chose comme ça , 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 existe un Firefox -moz-outline-radius uniquement, mais cela ne fonctionnera pas sur IE / Chrome / Safari / Opera / etc. Donc, il semble que la manière la plus compatible entre les navigateurs * d’obtenir une ligne courbe autour d’une bordure est d’utiliser un div wrapper:

HTML

 

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


* en plus d’utiliser des images

Je voulais une certaine accessibilité de mise au point pour les menus déroulants dans une barre de navigation Bootstrap, et j’étais plutôt content de cela:

  a.dropdown-toggle:focus { display: inline-block; box-shadow: 0 0 0 2px #88b8ff; border-radius: 2px; } 

Je sais ce qu’il veut dire …

Si vous voulez obtenir un aspect en relief, vous pouvez faire quelque chose comme ceci:

http://jsfiddle.net/xxCT8/

il cherche un moyen d’avoir ce travail dans d’autres navigateurs .. pas de solution de rechange que j’ai trouvé mais est-ce que quelqu’un d’autre a quelque chose?

EDIT: La seule autre façon de faire est d’utiliser box-shadow, mais cela ne fonctionnera pas si vous avez déjà une ombre de boîte sur cet élément.

Je viens de trouver une excellente solution pour cela, et après avoir examiné toutes les réponses à ce jour, je ne l’ai pas encore vu. Alors, voici ce que j’ai fait:

J’ai créé une règle CSS pour la classe et utilisé une pseudo-classe de: focus pour cette règle. J’ai défini le outline: none pour se débarrasser de ce «contour» bleu clair non lisible à la bordure que Chrome utilise par défaut. Ensuite, dans cette même pseudo-classe de :focus , où ce contour n’existe plus, j’ai ajouté mes propriétés de rayon et de bordure. Menant à la suivante

 outline: none; border-radius: 5px; border: 2px solid maroon; 

d’avoir un contour marron avec un rayon de bordure qui apparaît maintenant lorsque l’élément est sélectionné par l’utilisateur.

Il y a la solution si vous n’avez besoin que d’un contour sans bordure. Ce n’est pas le mien. J’ai reçu du fichier css Bootstrap. Si vous spécifiez le outline: 1px auto certain_color , vous obtiendrez une ligne mince autour du div d’une certaine couleur. Dans ce cas, la largeur spécifiée n’a aucune importance, même si vous spécifiez une largeur de 10 px, de toute façon ce sera une ligne fine. Le mot clé dans la règle mentionnée est “auto”.
Si vous avez besoin d’un contour avec des coins arrondis et d’une certaine largeur, vous pouvez append une règle CSS sur la bordure avec la largeur et la même couleur requirejses. Cela rend le contour plus épais.

Non. Les bordures sont placées à l’extérieur de l’élément et à l’intérieur de la zone de marge du modèle de boîte. Les contours se trouvent à l’intérieur de l’élément et la zone de remplissage du modèle de boîte l’ignore. Ce n’est pas destiné à l’esthétique. C’est juste pour montrer au designer les contours des éléments. Dans les premières étapes du développement d’un document HTML, par exemple, un développeur peut avoir besoin de discerner rapidement s’il a mis tous les div squelettes au bon endroit. Plus tard, ils devront peut-être vérifier si les différents boutons et formes correspondent au bon nombre de pixels.

Les frontières sont de nature esthétique. Contrairement aux contours, ils ne font pas partie du modèle de boîte, ce qui signifie qu’ils ne chevauchent pas le texte défini sur la marge: 0; et chaque côté de la bordure peut être stylé individuellement.

Si vous essayez d’appliquer un rayon de coin à votre contour, je suppose que vous l’utilisez comme la plupart des gens utilisent la bordure. Donc, si cela ne vous dérange pas de demander, quelle propriété de contour le rend souhaitable par rapport à la bordure?

Essayez d’utiliser un remplissage et une couleur d’arrière-plan pour la bordure, puis une bordure pour le contour:

 .round_outline { padding: 8px; background-color: white; border-radius: 50%; border: 1px solid black; } 

Travaillé dans mon cas.

Je viens de définir le contour transparent.

 input[type=text] { outline: rgba(0, 0, 0, 0); border-radius: 10px; } input[type=text]:focus { border-color: #0079ff; }