Puis-je ajouter une couleur d'arrière-plan uniquement pour le rembourrage ?

Question

J'ai une boîte d'en-tête avec une bordure, un remplissage et une couleur de fond pour cette boîte, Puis-je changer la couleur d'arrière-plan uniquement pour la région rembourrée après la bordure et ensuite la même couleur d'arrière-plan pour le reste de la largeur (c'est-à-dire le gris dans le code donné) ?

Juste une pincée du code où je veux la couleur d'arrière-plan rembourrée :

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}

Answer 1

Les réponses ont dit toutes les solutions possibles

J'en ai un autre avec BOX-SHADOW

c'est ici JSFIDDLE

et le code

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

il est également compatible avec IE9, ce qui est mieux que la solution des dégradés, ajouter les préfixes appropriés pour plus de support

IE8 ne le supporte pas, quel dommage !

Answer 2

Il n'existe pas de fonctionnalité exacte pour ce faire.

Sans envelopper un autre élément à l'intérieur, vous pourriez remplacer la bordure par un box-shadow et le padding par la bordure. Mais n'oubliez pas que l'ombre portée n'ajoute pas aux dimensions de l'élément.

jsfiddle est vraiment lent, sinon j'aurais ajouté un exemple.

Answer 3

Il s'agirait d'une solution CSS appropriée qui fonctionne également pour IE8/9 (IE8 avec html5shiv bien sûr) : codepen

nav {
  margin: 0px auto;
  height: 50px;
  background-color: gray;
  padding: 10px;
  border: 2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

<nav>lorem ipsum dolor sit amet</nav>

Answer 4

J'envelopperais simplement l'en-tête avec un autre div et je jouerais avec les bordures.

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS :

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Answer 5

Style le <hr> comme ça pour obtenir une ligne solide.

.line {
  height: 10px;
  color: black;
  margin: 0;
  border-style: solid;
  background-color: black;
}

<hr class="line">