Question

我正在学习网页开发，目前我正在用css“完成”，但我坚持 backround-clip 属性，更确切地说是内容框值。但是我试试，它只是不起作用，看起来我把它设置为 padding-box 。另请注意，我没有使用background（速记属性）。

必须有一些我缺少的东西。我学习这个属性的主要来源是CSS Tricks，正如你所看到的，我的例子几乎跟着这封信。无论如何，这是 JSFiddle 链接并亲自看到它：https://jsfiddle.net/av857arj/1/

Answer 1

您的盒子没有填充，因此填充框和内容框看起来一样。当您向所有三个框添加填充时，您可以看到差异。

＆＃13;

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

＆＃13;

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

＆＃13;

背景剪辑：内容框不起作用

1 个答案: