我想知道是否可以在 CSS 中的框周围获得一种玻璃效果边框。例如，一个div包含ul等的导航。这是我的意思的一个例子
问问题
8415 次
3 回答
5
2020年的玻璃效应
当我在 2012 年回答这个问题时，我只使用了当时浏览器很好支持的功能。您可以在下面找到它以供后代使用，但首先我将分享一个稍微有趣的玻璃效果，它看起来与原始问题中的效果有点不同。
我也不再那么关心一两个额外的元素，但如果你讨厌表现元素，请查看旧答案，看看如何使用伪元素来避免它们。
完整演示
.glass {
backdrop-filter: contrast(130%) brightness(120%) blur(2px);
background:
radial-gradient(
ellipse at 16.7% -10%,
hsla(0, 0%, 100%, 0.44) 24%,
hsla(0, 0%, 100%, 0.4) 25%,
hsla(0, 0%, 100%, 0.2) 45%,
hsla(0, 0%, 100%, 0.1)
);
background-size: 300% 100%;
border-radius: 10px;
box-shadow:
0 2px 1px hsla(0, 0%, 100%, 0.5) inset,
0 -2px 1px hsla(250, 70%, 5%, 0.3) inset,
0 -2px 6px hsla(0, 0%, 100%, 0.25);
}
/* -------------------------------------------
Decorative (not relevant to technique)
------------------------------------------- */
html {
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
font: 17px/21px Segoe UI, Tahoma, Helvetica, sans-serif;
height: 100%;
idth: 100%;
}
.frame {
padding: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
background: lemonchiffon;
border: 1px solid sienna;
padding: 20px 25px;
width: 300px;
}
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
c {
background: rgba(255,255,255,.5);
box-shadow: 0 0 3px rgba(0,0,0,.4);
color: #840b2a;
font-family: Consolas, Courier New, Courier, monospace;
font-weight: bold;
padding: 0 3px;
}<div class="glass frame centered">
<section class="content">
<p>A glass-effect frame using pure CSS.</p>
</section>
</div>打破它
背景过滤器
模糊窗格后面的东西给人的印象是光线在穿过玻璃时被散焦。此外，通过表面反射效果，增加了对比度和亮度，使背景更加突出。
backdrop-filter: contrast(130%) brightness(120%) blur(2px);
CSS渐变
这传达了光从玻璃表面不均匀反射的印象。此示例使用径向渐变来暗示光源与窗格的距离有限，但您也可以使用线性或锥形渐变（较少支持）来传达不同的照明效果。
背景大小也增加了，因此椭圆的边缘不显示。
background:
radial-gradient(
ellipse at 16.7% -10%,
hsla(0,0%,100%,.44) 24%,
hsla(0,0%,100%,.4) 25%,
hsla(0,0%,100%,.2) 45%,
hsla(0,0%,100%,.1)
);
background-size: 300% 100%;
多个盒子阴影
几个嵌入阴影用于突出顶部边缘并遮蔽另一个，而外部阴影意味着光线被投射到盒子边缘周围的背景上。改变这些阴影的位置和强度意味着隐含光源的位置会有所不同。
box-shadow:
0 2px 1px hsla(0,0%,100%,.5) inset, /* Highlight upper edge */
0 -2px 1px hsla(250,70%,5%,.3) inset, /* Shade lower edge */
0 -2px 6px hsla(0,0%,100%,.5); /* Imply light cast around the edges */
2012 年的玻璃效应（原始答案）
您可以使用更简单的 CSS 实现非常接近此的效果（几乎与问题中的示例相同）。此示例使用具有 RGBA 边框颜色和多个框阴影的单个元素来添加高光和阴影。
.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;
}
/* -------------------------------------------
Decorative (not relevant to technique)
------------------------------------------- */
html {
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
font: 13px/17px Segoe UI, Tahoma, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
c {
background: rgba(255,255,255,.5);
box-shadow: 0 0 3px rgba(0,0,0,.4);
color: #840b2a;
font-family: Consolas, Courier New, Courier, monospace;
font-weight: bold;
padding: 0 3px;
}
.box {
bottom:0;
height: 150px;
left:0;
margin:auto;
position:absolute;
top:0;
right:0;
width: 250px;
}
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }<div class="box">Your message.</div>请注意，box-shadowRGBA 边框颜色仅在 IE9+ 和更新版本的 Firefox、Chrome、Opera 和 Safari 中受支持。（尽管后一种浏览器的旧版本可能支持该属性的前缀版本。）在不支持任何一种的浏览器中，这会降级为仅内部黄色框。
于 2012-05-23T17:21:17.653 回答
1
您现在无法创建玻璃/模糊效果宽度 CSS。但是宽度透明边框和框阴影可以衰减背景。
您可以在我的 jsfiddle 中看到结果：http: //jsfiddle.net/DoubleYo/hyETB/1/
于 2012-05-15T14:44:30.217 回答
0
由于示例边框中有一个图案，您可能需要一个或多个带有 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 的 RGBA 颜色；也许您会使用半透明的灰度玻璃背景图像，您可以将其投射到任何色调之上。
在本地更好地支持多个边框之前（请参阅我的评论），您可以通过嵌套块元素并为每个元素赋予不同的边框来实现多个边框。其中一些元素的边距将有助于减少需要嵌套以获得所需效果的元素数量。
并且直到CSS Backgrounds and Borders Level 3的多背景图片得到更好的支持（但它已经是 CR，所以你可能很幸运），您可以通过使用不同位置（不同）的背景图片来实现多背景图片的错觉嵌套（定位）块元素。这样您就不需要固定大小的框和背景图像。
于 2012-05-14T00:31:34.513 回答