Css之background-clip
------------恢复内容开始------------
解释：margin区域就是图中最外层，border则是图中第二层区域，以此类推（图画的抽象，凭空想象一下）。
先来认识一下background-clip属性，background是背景，clip是修剪，整体意思就是修剪背景。
说到背景，我们就先来认识一下Css中的背景。
连着上面的图看，代码background-color:green将会直接把上图中border边框以内的区域全部变为绿色。但如果我们想要让padding以内的区域变成绿色或者是让content以内的区域变成绿色，那么此时clip属性就可以派上用场了。
clip有三个属性值：background-clip:border-box(默认)、padding-box、content-box
使用这三个值就可以截取border、padding、content以内的区域，对其进行我们所需要的操作。
下面来看例子：
复制代码
1 .box {
2 border: 20px dashed black
3 background-color: green
4 padding：20px；
5 background-clip: border-box/padding-box/content-box /*****注意看这里****/
6 }
7 <body>
8 <div class="box">
9 </div>
10 </body>
复制代码
显示如下：
如图中显示，clip会根据border、padding、content所在的区域，进行裁剪。
此外，再补充一个background-image属性：image是图片，下面我们来看看它在Css中是如何显示的：
复制代码
1 <style>
2 .box {
3 width: 468px
4 height: 262px
5 padding: 20px
6 border: 20px dashed black
7
透明色：transparent
背景色设为透明，代码如下：background-color:transparent
字体颜色设为透明，代码如下：color:transparent
扩展资料：
常用颜色代码分4种，分别如下：
1、常用颜色单词，比如green（绿色），yellow（黄色），red（红色），transparent（透明色）等；
2、以#号开头的六个字符组成的颜色代码，比如：#FF0000（红色），#000000（黑色），#F9F900（黄色）等；
3、颜色rgb值，表达方式：rgb(参数1，参数2，参数3)，三个参数分别表示r，g，b
1）R：红色值。正整数|百分数
2）G：绿色值。正整数|百分数
3）B：蓝色值。正整数|百分数
4、rgba(参数1，参数2，参数3，参数4)，这种方式前三个参数与上面第3点种相同，第四个参数表示透明度，数值在0-1之间。0表示透明度为0（即透明色），1表示透明度为1（百分百）。
CSS颜色代码比较多，而青绿色的css颜色代码如下：
你可以根据你想要的颜色选择对于的css代码
希望对你有帮助，祝你健康快乐
