Posso aggiungere il colore di sfondo solo per il riempimento?

Ho una casella di intestazione che include il bordo e il riempimento e il colore di sfondo per quella casella, posso cambiare il colore di sfondo solo per la regione imbottita dopo il bordo e quindi lo stesso colore di sfondo per il resto della larghezza (cioè grigio nel codice dato) ?

Solo un pizzico di codice dove voglio il colore di sfondo imbottito:

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

Un'altra opzione con CSS puro sarebbe qualcosa del genere:

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

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

Demo qui

Mi dispiace a tutti che questa sia la soluzione quella vera in cui non è necessario impostare effettivamente il padding.

http://jsfiddle.net/techsin/TyXRY/1/

Cosa ho fatto...

• Sono state applicate due sfumature sullo sfondo con entrambe un colore iniziale e finale. Invece di usare il colore solido. Il motivo è che non puoi avere due colori solidi per uno sfondo.
• Quindi ha applicato diverse proprietà di clip di sfondo a ciascuna.
• facendo così estendere un colore alla scatola del contenuto e un altro al bordo, rivelando l'imbottitura.

Intelligente se lo dico a me stesso.

div {
    padding: 35px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Usa le proprietà background-clipe box-shadow.

1) Imposta background-clip: content-box: limita lo sfondo solo al contenuto stesso (invece di coprire sia il riempimento che il bordo)

2) Aggiungi un interno box-shadowcon il raggio di diffusione impostato sullo stesso valore del riempimento.

Quindi supponiamo che il riempimento sia 10px - impostato box-shadow: inset 0 0 0 10px lightGreen- che renderà solo l'area di riempimento verde chiaro.

Codepen demo

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

Per un tutorial approfondito su questa tecnica, vedere questo fantastico post sui trucchi CSS

Puoi usare sfumature di sfondo per quell'effetto. Per il tuo esempio, aggiungi le seguenti righe (è così tanto codice perché devi usare i prefissi del fornitore):

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

Non c'è bisogno di markup non necessario.

Se vuoi solo avere un doppio bordo puoi usare contorno e bordo invece di bordo e riempimento.

Mentre potresti anche usare pseudo-elementi per ottenere l'effetto desiderato, ti sconsiglio. Gli pseudo-elementi sono uno strumento molto potente fornito dai CSS, se li "sprechi" in cose come questa, probabilmente ti mancheranno da qualche altra parte.

Uso gli pseudo-elementi solo se non c'è altro modo. Non perché siano cattivi, al contrario, perché non voglio sprecare il mio Joker.

le risposte dicevano tutte le possibili soluzioni

Ne ho un altro con BOX-SHADOW

eccolo JSFIDDLE

e il codice

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;
}

supporta anche in IE9, quindi è meglio della soluzione gradiente, aggiungi i prefissi appropriati per maggiore supporto

IE8 non lo supporta, che peccato!

Non puoi impostare il colore dell'imbottitura.

Dovrai creare un elemento wrapper con il colore di sfondo desiderato. Aggiungi un bordo a questo elemento e imposta la sua imbottitura.

Guarda qui per un esempio: http://jsbin.com/abanek/1/edit

Questa sarebbe una soluzione CSS adeguata che funziona anche per IE8 / 9 (IE8 con html5shiv ofcourse): 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;
}

Non esiste una funzionalità esatta per farlo.

Senza avvolgere un altro elemento all'interno, potresti sostituire il bordo con un'ombra a scatola e l'imbottitura con il bordo. Ma ricorda che l'ombra della scatola non si aggiunge alle dimensioni dell'elemento.

jsfiddle è molto lento, altrimenti aggiungerei un esempio.

Avvolgerei semplicemente l'intestazione con un altro div e giocherei con i bordi.

<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; }

Puoi fare un div sul padding come segue:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

la larghezza, la lunghezza, il colore di sfondo, i margini e lo z-index possono variare ovviamente, ma per coprire il riempimento, lo z-index deve essere maggiore di 0 in modo che si sovrapponga al riempimento. Puoi giocherellare con il posizionamento e simili per cambiarne l'orientamento. Spero possa aiutare!

PS i div sono html e #paddingOne e #paddingTwo sono css (nel caso qualcuno non lo avesse capito :)