css 背景与边框

边框的基本用法

border: width style color;

style: none|dotted|dashed|solid|double|groove|... 固然最经常使用的就是none和solid

背景与边框

, 在css中默认状况下，背景是会延伸到边框所在区域的下层，经过dashed border很容易观察出这种现象，这就是背景的工做原理。

解决方案

在css3中引入background-clip属性background-clip: boder-box|padding-box，意味着背景会被边框的外沿框或内边距的外沿框剪切掉。

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

应用场景

好比说父容器有一个漂亮的background，经过background-clip和alpha设置子容器的边框，但是时间子容器的边框随父容器背景的变化而变化。