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

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

在这里演示

Answer 3

使用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-tricks帖子

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

您无法设置填充的颜色。

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

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

Answer 6

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

我有另一个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不支持它,多么可惜!