Question

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

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

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

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

Answer 2

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

演示here

Answer 3

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

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

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

所以说填充是10px - 设置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

Answer 4

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

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

如果没有别的办法，我只使用伪元素。不是因为它们是坏的，恰恰相反，因为我不想浪费我的小丑。

Answer 5

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

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

Answer 6

您无法设置填充的颜色。

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

点击此处查看示例：http://jsbin.com/abanek/1/edit

Answer 7

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

Answer 8

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

Answer 9

没有确切的功能可以做到这一点。

如果不将另一个元素包裹在内部，则可以用框阴影替换边框，用边框替换边框。但请记住，盒子阴影不会增加元素的尺寸。

jsfiddle非常慢，否则我会添加一个例子。

Answer 10

您可以按如下方式对填充进行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，以便它将覆盖填充。您可以摆弄定位等，以改变其方向。希望有所帮助！

P.S。 div是html而#paddingOne和#paddingTwo是css（如果有人没有得到那个：）

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

10 个答案:

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

Codepen demo

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

10 个答案:

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

Codepen demo

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