我可以添加背景颜色只填充？
我有一个标题框，包括边框和填充以及该框的背景颜色，我可以更改背景颜色仅用于边框之后的填充区域，然后相同的背景颜色用于宽度的其余部分（即给定代码中的灰色） ？
只是我想要填充背景颜色的一小撮代码：
nav { margin:0px auto; width:100%; height:50px; background-color:grey; float:left; padding:10px; border:2px solid red; } 纯CSS的另一个select是这样的：
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; }
在这里演示
我很抱歉，这是解决scheme，真正的你不必真的设置填充。
http://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; }
使用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>
你可以使用背景渐变来达到这个效果。 对于你的例子，只需添加下面的行（这是很多代码，因为你必须使用供应商的前缀）：
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);
不需要不必要的标记。
如果你只是想有一个双边框，你可以使用轮廓和边框，而不是边框和填充。
虽然你也可以使用伪元素来达到预期的效果，但我build议不要这样做。 伪元素是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，所以它比梯度解决scheme更好，添加适当的前缀更多的支持
IE8不支持它，真是太遗憾了！
你不能设置填充的颜色。
你将不得不用所需的背景色创build一个包装元素。 将边框添加到此元素并设置其填充。
看这里的例子： http : //jsbin.com/abanek/1/edit
这将是一个适用于IE8 / 9的适当的CSS解决scheme（IE8与html5shiv of course）： 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; }
我只是用另一个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; }
没有确切的function来做到这一点。
没有包裹另一个元素，你可以用边框的阴影和填充来代替边框。 但请记住，box-shadow不会添加到元素的维度。
jsfiddle真的很慢，否则我会添加一个例子。
您可以在填充上做一个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，这样才能覆盖填充。 你可以摆弄定位等改变方向。 希望有所帮助！
PS的div是HTML和#paddingOne和#paddingTwo是CSS（如果有人不明白:)
