2-1 半透明边框(属性background-clip)

知识储备

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
并没有我们期望的效果

思考
两个属性的差别：
戳这个链接，反正我没懂。额

http://www.cnblogs.com/2050/archive/2012/11/13/2768289.html