背景クリップ：コンテンツ・ボックスが

Question

を動作しません私はWeb開発を学んだし、私は現在、CSSで「仕上げ」だけど、私はbackroundのクリッププロパティで立ち往生しています、より正確コンテンツボックス値。しかし私は試してみると、それはうまく動作せず、のパディングボックスに設定されているように見えます。また、私はbackground（簡体字のプロパティ）を使用しなかったことに注意してください。

欠けているものがあります。このプロパティを学習する私の主なソースはCSS Tricksであり、わかりますように、私の例はほとんどそれを手紙に従います。とにかく、ここでJSFiddleリンクだと自分自身でそれを参照してください。https://jsfiddle.net/av857arj/1/

Answer 1

あなたのボックスは、パディングを持っていないので、パディングボックスとコンテンツ・ボックスは同じように見えます。 3つのボックスすべてにパディングを追加すると、その違いがわかります。

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