102

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

パディングされた背景色が必要なコードのピンチ:

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

13 に答える 13

97

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

https://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;
}
<p>Padding IS COLORED</p>
<div>Mexican’t professor plum charlie chaplin? Facial accessory lorreto del mar Daniel plainview landed gentry circus strongman sam elliott zap rowsdower, lorreto del mar off-piste frightfully nice mustachio landed gentry Daniel plainview zap rowsdower toothbrush
  circus strongman boogie nights sam elliott Daniel plainview facial accessory, Daniel plainview man markings boogie nights mr frothy-top sam elliott worn with distinction mustachio zap rowsdower off-piste Daniel plainview toothbrush lorreto del mar frightfully
  nice wario facial accessory mr frothy-top landed gentry circus strongman prostate cancer? Rock n roll star gunslinger villain marquess of queensbury en time-warped cabbie off-piste graeme souness en time-warped cabbie, cunning like a fox gunslinger
  dodgy uncle clive villain karl marx marquess of queensbury en time-warped cabbie graeme souness rock n roll star off-piste en time-warped cabbie, rock n roll star lemmy dodgy uncle clive graeme souness professor plum en time-warped cabbie villain gunslinger
  en time-warped cabbie marquess of queensbury cunning like a fox devilish cad off-piste karl marx. John aldridge basil fawlty landed gentry louis xiii sam elliott brigadier, et sodales cum dick van dyke mouth coiffure louis xiii landed gentry basil fawlty
  john aldridge stiff upper lip brigadier crumb catcher sam elliott?</div>

于 2013-08-24T23:10:52.297 に答える
59

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

1) 設定background-clip: content-box- 背景をコンテンツ自体のみに制限します (パディングとボーダーの両方をカバーするのではなく)。

box-shadow2)拡散半径がパディングと同じ値に設定されたインナーを追加します。

したがって、パディングを 10px に設定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 の投稿を参照してください。

于 2016-02-07T10:02:38.117 に答える
10

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

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 が提供する非常に強力なツールです。このようなものでそれらを「無駄にする」と、おそらく他の場所で見逃すことになります。

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

于 2013-01-31T15:01:03.040 に答える
7

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

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

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

于 2013-01-31T14:54:33.127 に答える
1

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

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

jsfiddle は非常に遅いです。それ以外の場合は、例を追加します。

于 2013-01-31T14:57:52.990 に答える
0

ヘッダーを別の 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; }
于 2013-01-31T14:56:53.677 に答える