JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box-wrap origin-content">
  <div class="box content-box">
  clip:content-box <br>
  origin:content-box
  </div>
  <div class="box padding-box">
  clip:padding-box<br>
  origin:content-box
  </div>
  <div class="box border-box">
  clip:border-box<br>
  origin:content-box
  </div>
</div>
<div class="box-wrap origin-padding">
  <div class="box content-box">
  clip:content-box <br>
  origin:padding-box
  </div>
  <div class="box padding-box">
  clip:padding-box <br>
  origin:padding-box
  </div>
  <div class="box border-box">
  clip:border-box <br>
  origin:padding-box
  </div>
</div>
<div class="box-wrap origin-border">
  <div class="box content-box">
  clip:content-box <br>
  origin:border-box
  </div>
  <div class="box padding-box">
  clip:padding-box <br>
  origin:border-box
  </div>
  <div class="box border-box">
  clip:border-box <br>
  origin:border-box
  </div>
</div>

CSS

body {
  background: #000000;
}
.box-wrap {
  margin: 10px;
  overflow: hidden;
}
.box {
  box-sizing: border-box;
  float: left;
  width: 200px;
  height: 150px;
  
  padding: 20px;
  border: 10px dashed green;
  margin: 10px;
  font-size: 11px;
  background-image:url('https://www.cstatic-images.com/stock/570x380/15/img-1276321340-1509471668915.jpg');
  /* background-repeat: no-repeat; */
}
.box.content-box {
  background-clip: content-box;
}
.box.padding-box {
  background-clip: padding-box;
}
.box.border-box {
  background-clip: border-box;
}
.origin-content div {
  background-origin: content-box;
}
.origin-padding div {
  background-origin: padding-box;
}
.origin-border div {
  background-origin: border-box;
}