我有一个包含边框和填充的标题框,以及该框的背景颜色,我可以只为边框后的填充区域更改背景颜色,然后为其余宽度更改相同的背景颜色(即给定代码中的灰色)吗?
只需一小部分代码,我想要填充的背景颜色:
nav {
margin:0px auto;
width:100%;
height:50px;
background-color:grey;
float:left;
padding:10px;
border:2px solid red;
}
发布于 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
发布于 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
发布于 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提供的一个非常强大的工具,如果你把它们“浪费”在这样的东西上,你可能会在其他地方错过它们。
我只在没有其他方法的情况下才使用伪元素。不是因为它们不好,恰恰相反,因为我不想浪费我的小丑。
https://stackoverflow.com/questions/14628601
复制相似问题