Hintergrund-clip: content-Box wird nicht funktionieren

Question

ich Web-Entwicklung lerne und ich bin zur Zeit "Finishing" mit CSS, aber ich bin auf Hintergrund-clip Eigenschaft, genauer gesagt content-Box stecken Wert. Wie auch immer ich es versuche, es wird einfach nicht funktionieren und es sieht so aus, als hätte ich es auf padding-box gesetzt. Beachten Sie auch, dass ich background (Kurzschrift-Eigenschaft) nicht verwendet habe.

Da muss etwas sein, das ich vermisse. Meine Hauptquelle für das Lernen dieser Eigenschaft ist CSS Tricks und wie Sie sehen können, folgt mein Beispiel fast auf den Buchstaben. Wie auch immer, hier ist der JSFiddle Link und sehen Sie selbst: https://jsfiddle.net/av857arj/1/

Answer 1

Ihre Boxen keine Polsterung haben, so dass die padding-Box und Inhalt-Box wird gleich aussehen. Wenn Sie allen drei Feldern eine Füllung hinzufügen, können Sie den Unterschied sehen.

#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>