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

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

只是我想要填充背景颜色的少量代码：

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/

我做了什么...

• 在背景上应用两个渐变，每个渐变具有一种开始和结束颜色。而不是使用纯色。原因是您不能在一个背景上使用两种纯色。
• 然后对每个应用不同的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;
}

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

1）设置background-clip: content-box-将背景仅限制于内容本身（而不是覆盖边框和边框）

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

因此，假设填充为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技巧文章

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

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的正确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;
}

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

无需在其中包装其他元素，您可以用盒形阴影替换边框，并用边框替换填充。但是请记住，盒子阴影不会增加元素的尺寸。

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：

<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，这样才能覆盖在padding上。您可以摆弄定位，以改变其方向。希望有帮助！

PS的div是html，而#paddingOne和#paddingTwo是css（以防万一没有得到：）