background-clip、outline 和 box-shadow与“边框透明”

题引

最近在看《css揭秘》这本书，跟着敲了两个案例

半透明边框

场景：div设置白色背景，边框透明，父容器背景是一幅图片
起初代码是这样的

   background: white;		
	border: 10px solid hsla(0,0%,100%,.5);

会发现背景设置的白色会把边框设置的样式覆盖掉，在不考虑通过两层div的方式等实现方式下，可以使用background-clip

    background: white;		
	border: 10px solid hsla(0,0%,100%,.5);			
	background-clip: padding-box;

在w3school中是这样描述这个属性的：规定背景的绘制区域，在这里可以理解为规定白色背景的覆盖区域

外方内圆

在不考虑两层div等情况下，可以使用box-shadow + outline

先加上outline

 background: tan;
 border-radius: .8em;
 outline: .8em solid #655;

通 过 outline 属 性 实 现 的“ 边框”不会贴合元素的圆角这种行为被 CSS 工作组认为是一个 bug，因此未来可能会改为贴合 border-radius 圆角。

再用box-shadow 填补四角空白部分

background: tan;
border-radius: .8em;	
outline: .8em solid #655;
box-shadow: 0 0 0 .6em #655;

emmm

然后，写到这里我突然发现，outline 和 box-shadow 也都可以实现边框透明

background: white;		
outline: 10px solid hsla(0,0%,100%,.5);

background: white;		
box-shadow: 0 0 0 10px hsla(0,0%,100%,.5);

效果一样

总结

借着写博客来整理巩固知识，或许还有其他的小发现