background-clip的实际运用。

此为背景图剪切技术，1.可运用在各种选择框下（圆框、方框）选择不同的值，显示不同的点击后效果，可纯用css实现 ，不依靠JS的技术可实现。
2.可用background-clip来实现背景图剪切技术，来实现我们想展示的效果。
我们可以运用background-clip来实现单选、多选区域的样式，本图片直接加背景色，在运用background-clip的值来剪裁想要的样式区域就可以实现。
取值： padding-box
border-box 默认值
contene-box
裁剪规则：按裁剪的区域进行显示。
例入：padding-box在padding以内进行显示（不包括padding区域）。
代码如下：
< div class=“border-box”>< /div>
< div class=“padding-box”>
< div class=“content-box”>

div {
width: 120px;
height: 90px;
padding: 20px;
border: 10px dashed #F40;
background-color: yellow;
background-image: url(插入一张图片);
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
最终展现样式以及取值。

特别提示哦：背景的颜色或者背景图，在本代码中不是缩小了，背景图大小是保持不变的哦。