css – 我可以只为填充添加背景颜色吗?

前端之家收集整理的这篇文章主要介绍了css – 我可以只为填充添加背景颜色吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个标题包括边框,填充和背景颜色的盒子,
我可以改变背景颜色只是为边框后的填充区域,然后相同的背景颜色的宽度的其余部分(即给定代码中的灰色)?

只是一个捏的代码,我想要的填充的背景颜色:

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

解决方法

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

演示here

猜你在找的CSS相关文章