CSS RGBA边框/背景alpha double

我正在开发一个涉及很多透明度的网站,我想我会尝试在RGBA中完全构建它,然后为IE做后备.我需要一个"facebox"风格的边框效果,其中外边框是圆形的,并且比它所包围的框的背景更不透明.

来自http://24ways.org/2009/working-with-rgba-colour的最后一个例子似乎暗示它是可能的,但我似乎无法让它发挥作用.当我尝试以下内容时:

 

 
 


  

    This should look like a facebox.
  

看起来背景"延伸"在元素的边界下面,这导致像素值被加在一起.因此,当背景和边界都是半透明时,边框总是比元素的背景更不透明.这与我想要实现的完全相反,但似乎应该可以基于我见过的例子.

我还应该补充一点,我不能在容器中使用另一个元素,因为我也将在容器上使用border-radius来获得圆角,如果它们有背景,webkit会对子元素的角进行平方已分配,这实际上意味着带有方形内容的圆形外边框.

对不起,我无法发布此图片...显然我没有足够的代表发布图片.

您可以使用新background-clip: padding-box;属性来实现此目的.它计算从背景开始的位置.有关更多详细信息和示例,请单击此处