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設置子容器的邊框，但是時間子容器的邊框隨父容器背景的變化而變化。