Background clip: content box won't work
I am learning web development and I am currently finishing css, but I am attached to the backround-clip property , more precisely the content-box . However, I am trying, it just won't work and it looks like I installed it in addition. Also note that I have not used background
(shorthand property).
There must be something I am missing. My main source of exploring this property is CSS Tricks , and as you can see my example follows it almost to the letter.Anyway, here's a JSFiddle link and see it for yourself: https://jsfiddle.net/av857arj/1/
source to share
There are no uppercase letters in your boxes, so the fill box and content will look the same. When you add an add-on to all three boxes, you can see the difference.
#clip-ex-container {
width: 95%;
margin: auto;
padding: 10px 0;
}
.clip-ex-bb, .clip-ex-pb, .clip-ex-cb {
width: 20%;
margin: 1em;
height: 50px;
float: left;
background-color: rgb(189, 218, 49);
border: 0.6em solid rgba(54, 80, 65, 0.49);
padding: 1em;
}
.clip-ex-bb {
background-clip: border-box;
margin-left: 2.9em;
}
.clip-ex-pb {background-clip: padding-box;}
.clip-ex-cb {background-clip: content-box;}
<div id="clip-ex-container" class="clearfix">
<div class="clip-ex-bb">
<p>Border Box</p>
</div>
<div class="clip-ex-pb">
<p>Padding Box</p>
</div>
<div class="clip-ex-cb">
<p>Content Box</p>
</div>
</div>
source to share