知识储备
1.RGBA
R：红色值。正整数 | 百分数 0~255
G：绿色值。正整数 | 百分数 0~255
B：蓝色值。正整数| 百分数 0~255
A：透明度。取值0~1之间
2.HSLA
H : Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他 数值来确定其它颜色
S : Saturation(饱和度)。 取值为0%到100%之间的值
L : Lightness(亮度)。 取值为0%到100%之间的值
A : alpha(透明度)。 取值在0到1之间
3.background-clip:规定背景的绘制区域
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
小测试
html
div class="div1">
<p>
Can I haz semi-transparent borders? Pretty please?
</p>
</div>
css
.div1{
width: 20%;
margin: 0 auto;
padding: 30px;
background: linear-gradient(45deg,#e26f33 40%, #ffc3c8);
}
.div1 p{
width: 100%;
margin: 0;
box-sizing: border-box;
background: white;
border:10px solid hsla(0,0%,100%,.5); //！透明边框
}
结果：
看不见透明边框！
看不见透明边框
思考：
我们先来看看chrome控制台的模型吧
chrome控制台 div盒子
这里我们看到了border,这里查询到background-clicp 默认值border-box
背景色从边框开始填充，这里纯色的白色覆盖了半透明的白色
修改：
css
.div1 p{
width: 100%;
margin: 0;
box-sizing: border-box;
background: white;
border:10px solid hsla(0,0%,100%,.5); //！透明边框
background-clip:padding-box; //背景被裁剪到内边距框
}
background-clip:padding-box; //背景被裁剪到内边距框
结果：
看到了边框
半透明边框
更多思考
属性 background-orign:相对于什么位置来定位
参数：
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
测试
当我们用background-orign:padding-box;代替background-clip：padding-box时的结果
看不见border
并没有我们期望的效果
思考
两个属性的差别：
戳这个链接，反正我没懂。额
