html - 仅颜色元素的内容

Question

background-color 为元素的总大小着色，包括填充和边框。有没有办法只为内容背景着色而没有填充和边框？

只让 220px 变成黄色。

div.ex {
    width: 220px;
    padding: 10px;
    border: 5px solid;
    margin: 15px;
    background-color:yellow;
}

Answer 1

我们来获取您的 div

<div>Some text or anything</div>

像这样设置 CSS:

div {
margin:0px auto;
width:100%;
height:50px;
background-color:white;
float:left;
padding:10px;
border:2px solid red;
position: relative;
z-index: 10;}

div:after {
background-color: grey;
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;

参见 Demo