Kan ik alleen achtergrondkleur toevoegen voor opvulling?

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>

Antwoord 4, Autoriteit 22%

U kunt de achtergrondgradiënten voor dat effect gebruiken. Voeg voor uw voorbeeld gewoon de volgende regels toe (het is gewoon zoveel code omdat u Vendor-Prefixen moet gebruiken):

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

Geen noodzaak van onnodige markup.

Als u gewoon een dubbele grens wilt hebben, kunt u een overzicht en de rand gebruiken in plaats van rand en opvulling.

Hoewel je ook pseudo-elementen zou kunnen gebruiken om het gewenste effect te bereiken, zou ik dit afraden. Pseudo-elementen zijn een zeer krachtig hulpmiddel dat CSS biedt, als je ze “verspilt” aan dit soort dingen, zul je ze waarschijnlijk ergens anders missen.

Ik gebruik alleen pseudo-elementen als het niet anders kan. Niet omdat ze slecht zijn, integendeel, omdat ik mijn Joker niet wil verspillen.

Antwoord 5, autoriteit 17%

Je kunt de kleur van de opvulling niet instellen.

U moet een wrapper-element maken met de gewenste achtergrondkleur. Voeg een rand toe aan dit element en stel de opvulling in.

Kijk hier voor een voorbeeld: http://jsbin.com/abanek/1/edit

Antwoord 6, autoriteit 17%

de antwoorden zeiden alle mogelijke oplossingen

Ik heb er nog een met BOX-SHADOW

hier is het JSFIDDLE

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

het ondersteunt ook in IE9, dus het is beter dan een gradiëntoplossing,
voeg de juiste voorvoegsels toe voor meer ondersteuning

IE8 ondersteunt het niet, wat jammer!

Antwoord 7, autoriteit 5%

Dit zou een goede CSS-oplossing zijn die ook voor IE8/9 werkt (IE8 met html5shiv natuurlijk): coderen

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

Antwoord 8, Autoriteit 2%

Er is geen exacte functionaliteit om dit te doen.

Zonder een ander element binnen te wikkelen, kunt u de grens vervangen door een doos-schaduw en de vulling door de grens. Maar onthoud dat de box-schaduw niet aan de afmetingen van het element toeert.

JSFiddle is erg traag, anders zou ik een voorbeeld toevoegen.

Antwoord 9

Ik zou gewoon de kop wikkelen met een andere div en met grenzen.

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

Antwoord 10

U kunt een div over de vulling als volgt doen:

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

De breedte, lengte, achtergrondkleur, marges en z-index kunnen natuurlijk variëren, maar om de vulling te dekken, moet de Z-index hoger zijn dan 0, zodat deze over de vulling zal liggen. Je kunt met positionering spelen en zo om zijn oriëntatie te veranderen. Hoop dat dat helpt!

P.S. De DIV’s zijn HTML en de #paddingon en #paddingtwo zijn CSS (voor het geval iemand dat niet heeft gekregen:)