パディング専用の背景色を追加できますか？

境界線とパディングを含むヘッダーボックスとそのボックスの背景色があります。境界線の後のパディングされた領域の背景色のみを変更してから、残りの幅（つまり、指定されたコードでは灰色）の背景色を変更できますか？ ？

埋め込みの背景色が必要なコードのピンチ：

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

純粋なCSSの別のオプションは次のようになります。

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

こちらのデモ

これが実際にパディングを設定する必要がない本当の解決策であることを皆さんに申し訳ありません。

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

私がやった事...

• 背景に2つのグラデーションを適用し、両方に1つの開始色と終了色を設定しました。単色を使用する代わりに。1つの背景に2つの単色を使用できないためです。
• 次に、それぞれに異なるbackground-clipプロパティを適用しました。
• したがって、1つの色をコンテンツボックスに拡張し、もう1つの色を境界線に拡張して、パディングを明らかにします。

私が自分にそう言うなら賢い。

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

background-clipおよびbox-shadowプロパティを使用します。

1）設定background-clip: content-box-これにより、背景がコンテンツ自体のみに制限されます（パディングとボーダーの両方をカバーするのではなく）

2）box-shadow広がり半径がパディングと同じ値に設定されたインナーを追加します。

したがって、パディングが10px（set box-shadow: inset 0 0 0 10px lightGreen）であるとすると、パディング領域のみが薄緑色になります。

Codepenデモ

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>

このテクニックをカバーする完全なチュートリアルについては、この素晴らしいcss-tricksの投稿を参照してください

その効果には背景グラデーションを使用できます。あなたの例では、次の行を追加するだけです（ベンダープレフィックスを使用する必要があるため、非常に多くのコードです）。

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

不必要なマークアップは必要ありません。

二重の境界線が必要な場合は、境界線とパディングの代わりにアウトラインと境界線を使用できます。

疑似要素を使用して目的の効果を実現することもできますが、それはお勧めしません。疑似要素はCSSが提供する非常に強力なツールです。このようなものでそれらを「無駄にする」と、おそらくどこかでそれらを見逃してしまうでしょう。

他に方法がない場合にのみ、疑似要素を使用します。ジョーカーを無駄にしたくないので、彼らが悪いからではなく、まったく逆です。

答えはすべての可能な解決策を言った

BOX-SHADOWの別のものがあります

こちらはJSFIDDLEです

とコード

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

IE9でもサポートされているため、グラデーションソリューションよりも優れており、サポートを強化するために適切なプレフィックスを追加します

IE8はそれをサポートしていません、なんて残念です！

パディングの色を設定することはできません。

目的の背景色でラッパー要素を作成する必要があります。この要素に境界線を追加し、パディングを設定します。

例については、こちらをご覧ください：http：//jsbin.com/abanek/1/edit

これは、IE8 / 9（もちろんhtml5shivを備えたIE8）でも機能する適切なCSSソリューションです：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;
}

これを行うための正確な機能はありません。

内部に別の要素をラップせずに、境界線をボックスシャドウに置き換え、パディングを境界線に置き換えることができます。ただし、ボックスシャドウは要素の寸法に追加されないことに注意してください。

jsfiddleは本当に遅いです、そうでなければ私は例を追加します。

ヘッダーを別のdivでラップして、境界線で遊んでみます。

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

次のように、パディングに対してdivを実行できます。

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

もちろん、幅、長さ、背景色、余白、およびz-indexはさまざまですが、パディングをカバーするには、z-indexを0より大きくして、パディングの上に配置する必要があります。ポジショニングなどをいじって向きを変えることができます。お役に立てば幸いです。

PS divはhtmlで、＃paddingOneと#paddingTwoはcssです（誰かがそれを取得しなかった場合:)