web-dev-qa-db-fra.com

Comment puis-je configurer une bordure à l'intérieur de la div

Je me demandais s'il y avait un moyen de créer une div avec la "bordure" à l'intérieur de la div. Ce que je veux dire, c’est: j’ai par exemple une div de 200 pixels et je veux que la bordure soit à l’intérieur de 200 pixels, sans dépasser.

Je dois obtenir l'effet d'une div avec une bordure non pas sur le bord de la forme, mais 5 pixels de plus à l'intérieur. Une image peut parler plus que des centaines de mots 

Je veux ceci:

circle inside-borded

Voici mon code:

http://jsfiddle.net/hpLYD/1/

Le CSS:

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid blue;
}

La propriété Padding étend toute la division, y compris la frontière.

Comment puis-je obtenir cet effet en utilisant uniquement des CSS? c'est possible? 

css3htmlborderpadding
11
pwnjack

Vous pouvez le faire en utilisant la propriété CSS3 box-shadow . Ajoutez ce qui suit à votre CSS:

box-shadow: 0px 0px 0px 5px #f00;

Exemple jsFiddle

17
j08691

Bien que l'ombre de la boîte soit probablement la meilleure solution, les gens semblent oublier que la question exigeait que la frontière n'excède pas 200 pixels. Pour ce faire, vous pouvez utiliser le paramètre inset sur l'attribut box-shadow (qui créera une ombre interne).

Vous devrez également modifier le box-sizing en border-box, de sorte que la taille soit proportionnelle à la bordure et non au contenu.

Voici un JSFiddle avec le résultat

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid red;
    box-shadow: 0px 0px 0px 5px blue inset;
    box-sizing: border-box;
}
6
Daniel Perván
<div class="mydiv"></div>

.mydiv{
  position:relative;
  height:150px;
  width:200px;
  background:#f00;
}
.mydiv:before{
  position:absolute;
  content:'';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left:10px;
  right: 10px;
  border:1px solid #daa521;
}

Voici un JSFiddle avec le résultat

 enter image description here

2
Dishan TD

Vous ne pouvez pas placer de bordure dans un élément, mais vous pouvez utiliser box-shadow pour donner cet effet:

.circle {
    border-radius: 50%;
    width: 190px;
    height: 190px;
    background: red;
    border: 3px solid blue;
    box-shadow:  0px 0px 0px 10px red; /* 10px box-shadow */
}

Exemple JSFiddle .

Notez cependant qu'il s'agit d'une propriété de style CSS3 et qu'elle n'est pas prise en charge par tous les navigateurs. Vous devrez peut-être également utiliser les préfixes du vendeur sur certains navigateurs (-webkit, -moz, etc.). Consultez http://caniuse.com/#search=box-shadow pour obtenir de l'aide.

1
James Donnelly

Je suppose que vous pourriez ajouter une autre classe au cercle.

J'ai fait ça pour toi.

Je ne pense pas que vous puissiez ajouter un rembourrage à une bordure arrondie (mais ne citez pas mon propos), mais j'ai joué du violon en 30 secondes environ.

.scirle {see fiddle}

http://jsfiddle.net/hpLYD/7/embedded/result/

0
Ben

Le problème est qu’une frontière occupe l’écran immobilier, que cela nous plaise ou non. 

Si une bordure 1px est sur un élément 100px, même si nous pouvions le faire apparaître à l'intérieur, cet élément ne serait plus que de 98px à l'intérieur. Mais ce que nous sommes coincés en réalité, c’est un élément de 100 pixels qui est en réalité de 102 pixels causé par les frontières extérieures. Border-box ne semble rien influer sur les frontières dans la dernière version de Chrome - elles apparaissent toujours à l'extérieur.

Un moyen facile de résoudre ce problème consiste à utiliser un élément CSS :after ou :before à position absolue, ce qui signifie qu’aucun espace d’écran n’est perdu par la bordure. Voir exemple:

.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
0
rorymorris