我可以只为填充添加背景颜色吗？
我可以只为填充添加背景颜色吗？
提问于 2013-01-31 22:52:25
我有一个包含边框和填充的标题框，以及该框的背景颜色，我可以只为边框后的填充区域更改背景颜色，然后为其余宽度更改相同的背景颜色(即给定代码中的灰色)吗？
只需一小部分代码，我想要填充的背景颜色：
nav {
margin:0px auto;
width:100%;
height:50px;
background-color:grey;
float:left;
padding:10px;
border:2px solid red;
}回答 11
Stack Overflow用户
回答已采纳
发布于 2013-01-31 23:04:29
纯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>
演示here
Stack Overflow用户
发布于 2016-02-07 18:02:38
使用background-clip和box-shadow属性。
1)设置background-clip: content-box -将背景限制为内容本身(而不是同时覆盖填充和边框)
2)添加一个内部box-shadow，将扩展半径设置为与填充相同的值。
因此，假设填充为10px -设置box-shadow: inset 0 0 0 10px lightGreen -这将只使填充区域变为浅绿色。
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
Stack Overflow用户
发布于 2013-01-31 23:01:03
你可以使用背景渐变来达到这个效果。对于您的示例，只需添加以下几行(这只是很长的代码，因为您必须使用供应商前缀)：
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);不需要不必要的标记。
如果你只想有一个双边框，你可以使用outline和border来代替边框和填充。
虽然您也可以使用伪元素来实现所需的效果，但我建议您不要这样做。伪元素是CSS提供的一个非常强大的工具，如果你把它们“浪费”在这样的东西上，你可能会在其他地方错过它们。
我只在没有其他方法的情况下才使用伪元素。不是因为它们不好，恰恰相反，因为我不想浪费我的小丑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14628601
复制相关文章
相似问题