我可以只为填充添加背景颜色吗？答案

【问题标题】：Can I add background color only for padding?我可以只为填充添加背景颜色吗？
【发布时间】：2013-01-15 17:17:53
【问题描述】：

我有一个标题框，包括该框的边框和填充以及背景颜色，我可以只为边框后的填充区域更改背景颜色，然后为其余宽度更改相同的背景颜色（即给定代码中的灰色）？

只需一小撮我想要填充背景颜色的代码：

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

【问题讨论】：

我不这么认为，但我喜欢被证明是错误的。（我想你需要嵌套一个元素。）
不，你是对的，大卫。
@DavidThomas 我也希望如此！让我们看看..
EliGassert umm.. 那么我能做些什么让盒子里面有不同颜色的盒子？
看看我的答案，它可以完成。

标签： css

【解决方案1】：

如果您不想影响内容背景，并且每个方向都有不同的填充，请使用以下内容：

div {
  width: 440px;
  padding: 10px 20px 30px 40px;
  box-shadow: inset 0 10px 0 0 lightGreen, inset -20px 0 0 0 lightGreen, inset 0 -30px 0 0 lightGreen, inset 40px 0 0 0 lightGreen;
}

&lt;div&gt;The light green background color shows the padding of the element&lt;/div&gt;

【讨论】：

【解决方案2】：

另一个技巧：

将两个 div 堆叠在一起，然后为每个应用不同的background-clip（底部为padding-box，顶部为content-box）：

.rect {
  width: 100px;
  height: 50px;
  border: red solid 5px;
  padding: 10px;
  position: absolute;
}
.bottom {
  background: yellow padding-box;
}
.top {
  background: pink content-box;
}

<div>
  <div class="rect bottom"></div>
  <div class="rect top"></div>
</div>

林克：

【讨论】：

【解决方案3】：

对不起大家，这是真正的解决方案，您不必实际设置填充。

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

我做了什么……

在背景上应用了两个渐变，都具有一种开始和结束颜色。而不是使用纯色。原因是一个背景不能有两种纯色。
然后对每个应用不同的 background-clip 属性。
从而使一种颜色延伸到内容框，而另一种颜色延伸到边框，从而显示填充。

如果我对自己这么说，那就太聪明了。

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>

【讨论】：

非常聪明。我已经稍微清理了小提琴：jsfiddle.net/ilancopelyn/n1ax4qvt
现在它在 jsfiddle.net/TyXRY/123 (123) 上，但我不清楚他们在做什么或谁在做什么。
我喜欢这个。太糟糕了，中间（即内容框）不能是透明的，并且不能在底层（例如主体）颜色上打一个洞。当我尝试这个时，我只是在 Chrome 中看到了外部渐变。
天才！有没有办法给它附加一个过渡？我试过但没有成功。
transition: all 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

【解决方案4】：

像这样设置<hr> 的样式以获得实线。

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

&lt;hr class="line"&gt;

【讨论】：

【解决方案5】：

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

&lt;nav&gt;Some text or anything&lt;/nav&gt;

演示here

【讨论】：

由于width: 100%;，您的伪类元素超出了右侧的父框
现在右边的间距太大了，只设置宽度 95% 不太可靠，尤其是在 padding 发生变化的情况下。 ;)
@Simon 你能解释一下为什么你放置了代码position:relative; 我可以看看它是否没有放置然后它不会出现在屏幕上！.. 但这是如何工作的？
@Pavan Nadig 相对位置是这样可以添加z-index值并生效。 Z-index 仅适用于定位元素。
我认为这是最好的解释here

【解决方案6】：

这将是一个适用于 IE8/9 的适当 CSS 解决方案（当然是带有 html5shiv 的 IE8）：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;
}

&lt;nav&gt;lorem ipsum dolor sit amet&lt;/nav&gt;

【讨论】：

【解决方案7】：

使用`background-clip` 和`box-shadow` 属性。

1) 设置background-clip: content-box - 这将背景限制在内容本身（而不是同时覆盖填充和边框）

2) 添加一个内部box-shadow，其扩展半径设置为与填充相同的值。

假设内边距为 10 像素 - 设置 box-shadow: inset 0 0 0 10px lightGreen - 这将使内边距区域变为浅绿色。

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>

有关此技术的详尽教程，请参阅this great css-tricks post

【讨论】：

0 0 0 是什么意思？
@Nakilon box-shadow 有四个属性。 0 0 0 将 h-shadow v-shadow 和 blur 设置为 0，因为在此实现中不需要水平阴影、垂直阴影和模糊距离。对于10px，它只是一个向内（inset）的实心阴影。
简单而有效！
非常感谢，我对内容使用了淡入，而您的解决方案是唯一使矩形内容保持透明的解决方案。

【解决方案8】：

您可以按如下方式在填充上做一个 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 当然可以变化，但为了覆盖 padding，z-index 必须高于 0，这样它才会覆盖 padding。你可以摆弄定位等来改变它的方向。希望对您有所帮助！

附： div 是 html，#paddingOne 和 #paddingTwo 是 css（以防有人不明白：）

【讨论】：

【解决方案9】：

答案说明了所有可能的解决方案

我还有一个 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不支持，太可惜了！

【讨论】：

【解决方案10】：

您可以使用背景渐变来实现该效果。对于您的示例，只需添加以下几行（代码太多，因为您必须使用供应商前缀）：

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 提供的一个非常强大的工具，如果你把它们“浪费”在这样的东西上，你可能会在其他地方错过它们。

如果没有其他方法，我只会使用伪元素。不是因为它们不好，恰恰相反，因为我不想浪费我的小丑。

【讨论】：

如果你可以忽略 IE9 - 你可以用渐变来做到这一点，但伪类至少支持到 IE8。
确实如此。但是如果有很多这样的案例可能值得使用 css3pie.com
什么是浪费？伪元素是否只能在有限的时间内使用？
是的，它们是有限的。每个元素都有 2 个（1x ::before，1x ::after）。

【解决方案11】：

您不能设置内边距的颜色。

您必须创建一个具有所需背景颜色的包装元素。给这个元素添加边框并设置它的内边距。

看这里的例子：http://jsbin.com/abanek/1/edit

【讨论】：

Actually you can（现在） - 请参阅 this great css-tricks post 了解详细说明

【解决方案12】：

没有执行此操作的确切功能。

不用在里面包裹另一个元素，你可以用盒子阴影代替边框，用边框代替填充。但请记住，box-shadow 不会增加元素的尺寸。

jsfiddle 真的很慢，否则我会添加一个示例。

【讨论】：

【解决方案13】：

我只是用另一个 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; }

【讨论】：

那很酷..顺便说一句，因为我已经将整个盒子用作<nav>，我该如何添加类？
我相信<nav> 可以上课。看看@mookamafoob 的答案。我实际上不会那样做，因为我担心浏览器支持。但是，如果您更喜欢 HTML5/CSS3，那就是这样做的方式。

使用background-clip 和box-shadow 属性。

Codepen demo

使用`background-clip` 和`box-shadow` 属性。