Question

我想知道我是否可以在CSS中的盒子周围找到一种玻璃边框。例如，包含ul等的导航div。这是我想要描述的事物的类型。

谢谢！

Answer 1

使用纯CSS可以达到非常接近的效果。此示例使用具有RGBA边框颜色和多个框阴影的单个元素来添加高光和阴影。

<div class="box">Your message.</div>

.box {
    background: #f0edcc;
    background-clip: padding-box;          /* Background stops at border */
    border: 4px solid rgba(255,255,255,.2);
    border-radius: 3px;
    box-shadow:
       0    0   1px  rgba(255,255,255,.8), /* Bright outer highlight */
       0    0   3px  rgba(0,0,0,.8),       /* Outer shadow */
       1px  1px 0    rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
      -1px -1px 0    rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
    padding: 10px;
}

请注意，只有IE9 +及更新版本的Firefox，Chrome，Opera和Safari支持box-shadow和RGBA边框颜色。（虽然后一种浏览器的旧版本可能支持该属性的前缀版本。）在不支持任何版本的浏览器中，这会降级为内部黄色框。

Answer 2

目前无法创建Glass / Blur效果宽度CSS。但宽度透明边框和框阴影可以减弱背景。

你可以在我的jsfiddle中看到结果：http://jsfiddle.net/DoubleYo/hyETB/1/

Answer 3

由于示例边框中有一个模式，您可能需要一个或多个带有Alpha通道的PNG背景图像（这样父母的背景可以在所需的范围内发光）;仅使用统一的RGBA颜色的边框不就足够了。

然后将另一个块元素嵌套在具有该背景的元素中。使用一个背景图片，示例HTML：

<div id="glass-box">
  <div id="inner">
    <p>Text</p>
  </div>
</div>

示例CSS：

#glass-box
{
  background: transparent url(glass.png) 0 0 no-repeat;
}

#glass-box #inner
{
  margin: 10px;
  background-color: white;
}

您可能希望尝试使用不透明度transparent。 1.0;也许你会使用一个半透明的灰度玻璃背景图像，你可以在任何色调上投影。

在本地更好地支持多个边框之前（请参阅我的评论），您可以通过嵌套块元素并为每个边框赋予不同的边框来实现多个边框。其中一些元素的边距将有助于减少需要嵌套以实现所需效果的元素数量。

直到CSS Backgrounds and Borders Level 3的多个背景图像得到更好的支持（但它已经是CR，所以你可能很幸运），你可以通过使用不同位置（不同）的背景来实现多个背景图像的错觉嵌套（定位）块元素的图像。这样你就不需要一个固定大小的盒子和背景图像。

盒子周围有玻璃（不透明/透明）边框？

3 个答案: