Comment puis-je configurer une frontière à l'intérieur de la div
Je me demandais juste si il y a une façon de créer un div avec la "frontière" à l'intérieur de la div. Ce que je veux dire, c'est: j'ai un div de 200px par exemple et que je veux la frontière à l'intérieur de 200 pixels, sans dépasser.
J'ai besoin pour atteindre l'effet d'un div avec une bordure non pas sur le bord de la forme, mais 5px plus à l'intérieur. Une image parle plus que des centaines de mots
Ce que je veux c':
Voici mon code:
Le CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Propriété Padding est l'expansion de l'ensemble de la div, y compris la frontière.
Comment puis-je obtenir cet effet en utilisant uniquement css? est-il possible?
Remarque: Le
border: dashed/dotted;
ne fonctionne pas dans Firefox, il les rend solides de toute façon (quand border-radius est appliqué).OriginalL'auteur pwnjack | 2013-06-03
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire cela en utilisant la propriété CSS3 box-shadow. Ajoutez les lignes suivantes à votre fichier CSS:
jsFiddle exemple
Anonymous coward downvoter soin d'expliquer le problème?
OriginalL'auteur j08691
Tout box-shadow est probablement la meilleure façon d'aller, les gens semblent oublier que la question nécessite que la frontière de ne pas dépasser 200px. Afin de réaliser cela, vous pouvez utiliser le
inset
paramètre sur le box-shadow attribut (qui sera une ombre interne).Vous aurez aussi besoin de changer la
box-sizing
àborder-box
tels que la taille est proportionnelle à la frontière et non pas le contenu.Voici un JSFiddle avec le résultat
OriginalL'auteur Daniel Perván
Voici un JSFiddle avec le résultat
OriginalL'auteur Dishan TD
Vous ne pouvez pas placer une frontière à l'intérieur d'un élément, cependant, vous pouvez utiliser
box-shadow
pour donner cet effet:JSFiddle exemple.
Ne remarque cependant que c'est une propriété de style CSS3 et n'est pas pris en charge sur tous les navigateurs. Vous pouvez aussi avoir besoin d'utiliser des fournisseurs de préfixes sur certains navigateurs (
-webkit
,-moz
, etc). Vérifier http://caniuse.com/#search=box-shadow pour le soutien.Je le disais plus pour les
box-shadow
bien au-dessus de votre code d'exemple.-webkit-box-shadow
et-moz-box-shadow
spécifiquement.OriginalL'auteur James Donnelly
Je suppose que vous pourriez ajouter une autre classe le cercle.
Je l'ai fait pour vous.
Je ne pense pas que vous pouvez ajouter un rembourrage de une bordure arrondie (ne me citer), mais j'ai fait du violon dans les 30 secondes environ.
http://jsfiddle.net/hpLYD/7/embedded/result/
OriginalL'auteur Ben
Le problème, c'est une frontière prend écran de l'immobilier, qu'on le veuille ou non.
Si un 1px frontière est sur 100px élément, même si on pouvait l'obtenir à apparaître à l'intérieur, cet élément ne 98px à l'intérieur. Mais ce que nous sommes coincés avec, en réalité, est un 100px élément qui est en fait 102px causés par les frontières à l'extérieur. Border-box ne semble pas faire quelque chose de frontières dans le dernier Chrome - ils apparaissent toujours à l'extérieur.
Un moyen facile de résoudre ce problème est à l'aide d'un positionnement absolu CSS
:after
ou:before
élément, ceci signifie fondamentalement pas d'écran de l'espace est perdu par la frontière. Voir l'exemple:OriginalL'auteur rorymorris