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

Question

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

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

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

score 97 · Accepted Answer

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

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

我做了什么...

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

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

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>

score 59 · Accepted Answer

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

score 42 · Accepted Answer

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

<nav>Some text or anything</nav>

演示在这里

score 10 · Accepted Answer

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

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

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

score 7 · Accepted Answer

您不能设置填充的颜色。

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

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

score 7 · Accepted Answer

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

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

score 2 · Accepted Answer

这将是一个适用于 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;
}

<nav>lorem ipsum dolor sit amet</nav>

score 1 · Accepted Answer

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

无需在内部包装另一个元素，您可以用 box-shadow 替换边框，用边框替换填充。但请记住 box-shadow 不会增加元素的尺寸。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您可以按如下方式在填充上执行 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。你可以摆弄定位等来改变它的方向。希望有帮助！

PS div 是 html 而 #paddingOne 和 #paddingTwo 是 css （以防有人不明白:)

score 0 · Accepted Answer

<hr>像这样设计一条实线。

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

<hr class="line">

score 0 · Accepted Answer

另一个技巧：

将两个 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>

链接：

score 0 · Accepted Answer

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

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

<div>The light green background color shows the padding of the element</div>

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

13 回答 13

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

Codepen 演示

Related

Reference

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