我可以只添加背景色来填充吗?

I have a header box including border and padding and background color for that box, can I change the background color only for the padded region after the border and then the same background color for the rest of the width (i.e. grey in the given code)?

我有一个标题框，包括边框和填充以及该框的背景颜色，我是否可以只改变填充区域的背景颜色，然后改变宽度其余部分的背景颜色(即给定代码中的灰色)?

Just a pinch of the code where I want the padded background color:

只需一点代码，我想要填充背景颜色:

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

10 个解决方案

#1

Another option with pure CSS would be something like this:

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

Demo here

演示

#2

I am sorry everyone that this is the solution the true one where you dont have to actually set the padding.

我很抱歉，大家都认为这是解决问题的方法，你不需要设置填充。

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

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

What i have done...

我所做的一切……

• Applied two gradients on background with both having one start and end color. Instead of using solid color. Reason being that you can't have two solid colors for one background.
• 在背景上应用两个渐变，都有一个开始和结束的颜色。而不是用纯色。原因是你不可能有两个纯色作为一个背景。
• Then applied different background-clip property to each.
• 然后对每个应用不同的背景剪辑属性。
• thus making one color extend to content box and other to border, revealing the padding.
• 因此，使一种颜色扩展到内容框，另一种扩展到边框，显示填充。

Clever if i say so to myself.

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

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

#3

Use the background-clip and box-shadow properties.

1) Set background-clip: content-box - this restricts the background only to the content itself (instead of covering both the padding and border)

1)设置背景剪辑:内容框——这将背景限制为内容本身(而不是同时覆盖填充和边框)

2) Add an inner box-shadow with the spread radius set to the same value as the padding.

2)添加一个内框阴影，其展开半径设置为与填充相同的值。

So say the padding is 10px - set box-shadow: inset 0 0 0 10px lightGreen - which will make only the padding area light green.

假设填充是10px - set - box-shadow: inset 0 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>

For a thorough tutorial covering this technique see this great css-tricks post

有关此技术的详细教程，请参阅这篇很棒的css技巧文章

#4

You can use background-gradients for that effect. For your example just add the following lines (it is just so much code because you have to use vendor-prefixes):

你可以使用背景梯度来达到这个效果。对于您的示例，只需添加以下几行代码(由于必须使用供应商-前缀，所以代码非常多):

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

No need for unecessary markup.

不需要不必要的标记。

If you just want to have a double border you could use outline and border instead of border and padding.

如果你只是想有一个双重边框，你可以使用轮廓和边框，而不是边框和填充。

While you could also use pseudo-elements to achieve the desired effect, I would advise against it. Pseudo-elements are a very mighty tool CSS provides, if you "waste" them on stuff like this, you are probably gonna miss them somewhere else.

虽然您也可以使用伪元素来达到预期的效果，但我建议您不要这样做。伪元素是CSS提供的一个非常强大的工具，如果你把它们浪费在这样的东西上，你可能会在别的地方错过它们。

I only use pseudo-elements if there is no other way. Not because they are bad, quite the opposite, because I don't want to waste my Joker.

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

#5

the answers said all the possible solutions

答案是所有可能的解决方案。

I have another one with BOX-SHADOW

我还有一个带框形阴影的

here it is JSFIDDLE

这是JSFIDDLE

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

it also support in IE9, so It's better than gradient solution, add proper prefixes for more support

它还支持IE9，因此比渐变解决方案更好，添加适当的前缀以获得更多的支持

IE8 dont support it, what a shame !

我不支持，真遗憾!

#6

You can't set colour of the padding.

你不能设置衬垫的颜色。

You will have to create a wrapper element with the desired background colour. Add border to this element and set it's padding.

您必须创建一个具有所需背景颜色的包装器元素。向该元素添加边框并设置为填充。

Look here for an example: http://jsbin.com/abanek/1/edit

这里有一个例子:http://jsbin.com/abanek/1/edit

#7

This would be a proper CSS solution which works for IE8/9 as well (IE8 with html5shiv ofcourse): codepen

这将是一个合适的CSS解决方案，也适用于IE8/9 (IE8和html5shiv当然):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;
}

#8

I'd just wrap the header with another div and play with borders.

我只需要用另一个div来结束标题，然后使用边框。

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS:

CSS:

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

#9

There is no exact functionality to do this.

这样做没有确切的功能。

Without wrapping another element inside, you could replace the border by a box-shadow and the padding by the border. But remember the box-shadow does not add to the dimensions of the element.

不需要在内部包装另一个元素，您可以使用框阴影和边框填充来替换边框。但是请记住，盒形阴影不会增加元素的尺寸。

jsfiddle is being really slow, otherwise I'd add an example.

jsfiddle很慢，否则我就添加一个例子。

#10

You can do a div over the padding as follows:

你可以做一个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;

the width, length, background color, margins, and z-index can vary of course, but in order to cover the padding, the z-index must be higher than 0 so that it will lay over the padding. You can fiddle with positioning and such to change its orientation. Hope that helps!

当然，宽度、长度、背景颜色、边距和z索引会有所不同，但是为了覆盖填充，z索引必须大于0，以便覆盖填充。你可以摆弄定位，从而改变它的方向。希望会有帮助!

P.S. the divs are html and the #paddingOne and #paddingTwo are css (in case anyone didn't get that:)

另外，div标签是html， #paddingOne和#paddingTwo是css(以防有人听不懂)。