背景剪輯：內容對話框不能起作用，

Question

我正在學習網絡開發和我目前「整理」的CSS，但我被困在底色，剪貼性能，更準確地說內容盒值。不過，我嘗試，它不會工作，它看起來像我設置爲填充框。另外請注意，我沒有使用background（速記屬性）。

必須有我遺失的東西。我學習這個屬性的主要來源是CSS Tricks，正如你所看到的，我的例子幾乎跟在這封信上。無論如何，這裏的JSFiddle鏈接，併爲你自己看到：https://jsfiddle.net/av857arj/1/

Answer 1

你的箱子沒有填充，所以填充框和內容框將看起來一樣。當您將填充添加到所有三個框時，您可以看到差異。

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