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

Question

我想知道是否可以在 CSS 中的盒子周围获得一种玻璃效果边框。例如，div包含ul等等的导航。这是我的意思的一个例子

Answer 1

2020年的玻璃效应

\n\n

当我在 2012 年回答这个问题时，我只使用了当时浏览器很好支持的功能。您可以在下面找到它以供后代使用，但首先我将分享一个稍微更有趣的玻璃效果，它看起来与原始问题中的效果有点不同。

\n\n

我也不再关心一两个额外的元素，但如果您讨厌演示元素，请查看旧的答案，看看如何使用伪元素来避免它们。

\n\n

完整演示

\n\n

\r\n

\r\n

.glass {\r\n  backdrop-filter: contrast(130%) brightness(120%) blur(2px);\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 16.7% -10%,\r\n      hsla(0, 0%, 100%, 0.44) 24%,\r\n      hsla(0, 0%, 100%, 0.4) 25%,\r\n      hsla(0, 0%, 100%, 0.2) 45%,\r\n      hsla(0, 0%, 100%, 0.1)\r\n    );\r\n  background-size: 300% 100%;\r\n  border-radius: 10px;\r\n  box-shadow:\r\n    0 2px 1px hsla(0, 0%, 100%, 0.5) inset,\r\n    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset,\r\n    0 -2px 6px hsla(0, 0%, 100%, 0.25);\r\n}\r\n\r\n\r\n\r\n/* -------------------------------------------\r\n   Decorative (not relevant to technique)\r\n   ------------------------------------------- */\r\nhtml {\r\n  background:\r\n    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,\r\n    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,\r\n    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,\r\n    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,\r\n    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,\r\n    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,\r\n    linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);\r\n  background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;\r\n  background-color: #840b2a;\r\n  font: 17px/21px Segoe UI, Tahoma, Helvetica, sans-serif;\r\n  height: 100%;\r\n  idth: 100%;\r\n}\r\n\r\n.frame {\r\n  padding: 20px;\r\n}\r\n\r\n.centered {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.content {\r\n  background: lemonchiffon;\r\n  border: 1px solid sienna;\r\n  padding: 20px 25px;\r\n  width: 300px;\r\n}\r\n\r\n.content > :first-child { margin-top: 0; }\r\n.content > :last-child { margin-bottom: 0; }\r\n\r\nc {\r\n  background: rgba(255,255,255,.5);\r\n  box-shadow: 0 0 3px rgba(0,0,0,.4);\r\n  color: #840b2a;\r\n  font-family: Consolas, Courier New, Courier, monospace;\r\n  font-weight: bold;\r\n  padding: 0 3px;\r\n}

\r\n

<div class="glass frame centered">\r\n  <section class="content">\r\n    <p>A glass-effect frame using pure CSS.</p>\r\n  </section>\r\n</div>

\r\n

\r\n

\r\n

\n\n

分解它

\n\n

背景滤镜

\n\n

模糊玻璃后面的东西给人一种光线在穿过玻璃时散焦的印象。此外，还增加了对比度和亮度，通过表面反射效果使背景更加突出。

\n\n

backdrop-filter: contrast(130%) brightness(120%) blur(2px);\n

\n\n

CSS 渐变

\n\n

这传达了光从玻璃表面不均匀反射的印象。此示例使用径向渐变来暗示光源距窗格有限距离，但您也可以使用线性或圆锥形渐变（较少支持）来传达不同的照明效果。

\n\n

背景大小也增加，以便椭圆的边缘不显示。

\n\n

background:\n  radial-gradient(\n    ellipse at 16.7% -10%,\n    hsla(0,0%,100%,.44) 24%,\n    hsla(0,0%,100%,.4) 25%,\n    hsla(0,0%,100%,.2) 45%,\n    hsla(0,0%,100%,.1)\n  );\nbackground-size: 300% 100%;\n

\n\n

多个盒子阴影

\n\n

几个插入阴影用于突出显示顶部边缘并遮蔽另一个边缘，而外部阴影则意味着光线投射到盒子边缘周围的背景上。改变这些阴影的位置和强度将意味着隐含光源位置的不同情况。

\n\n

box-shadow:\n  0 2px 1px hsla(0,0%,100%,.5) inset, /* Highlight upper edge */\n  0 -2px 1px hsla(250,70%,5%,.3) inset, /* Shade lower edge */\n  0 -2px 6px hsla(0,0%,100%,.5); /* Imply light cast around the edges */\n

\n\n\n\n

2012年的玻璃效应（原始答案）

\n\n

您可以使用更简单的 CSS 实现与此 \xe2\x80\x94 非常接近的效果，几乎与问题中的示例 \xe2\x80\x94 相同。此示例使用具有 RGBA 边框颜色和多个框阴影的单个元素来添加高光和阴影。

\n\n

\r\n

\r\n

.box {\r\n  background: #f0edcc;\r\n  background-clip: padding-box;          /* Background stops at border */\r\n  border: 4px solid rgba(255,255,255,.2);\r\n  border-radius: 3px;\r\n  box-shadow:\r\n     0    0   1px  rgba(255,255,255,.8), /* Bright outer highlight */\r\n     0    0   3px  rgba(0,0,0,.8),       /* Outer shadow */\r\n     1px  1px 0    rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */\r\n    -1px -1px 0    rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */\r\n  padding: 10px;\r\n}\r\n\r\n\r\n\r\n/* -------------------------------------------\r\n   Decorative (not relevant to technique)\r\n   ------------------------------------------- */\r\nhtml {\r\n  background: \r\n    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,\r\n    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,\r\n    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,\r\n    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,\r\n    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,\r\n    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,\r\n    linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);\r\n  background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;\r\n  background-color: #840b2a;\r\n  font: 13px/17px Segoe UI, Tahoma, Helvetica, sans-serif;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\nc {\r\n  background: rgba(255,255,255,.5);\r\n  box-shadow: 0 0 3px rgba(0,0,0,.4);\r\n  color: #840b2a;\r\n  font-family: Consolas, Courier New, Courier, monospace;\r\n  font-weight: bold;\r\n  padding: 0 3px;\r\n}\r\n\r\n.box {\r\n  bottom:0;\r\n  height: 150px;\r\n  left:0;\r\n  margin:auto;\r\n  position:absolute;\r\n  top:0;\r\n  right:0;\r\n  width: 250px;\r\n}\r\n\r\n.box > :first-child { margin-top: 0; }\r\n.box > :last-child { margin-bottom: 0; }

\r\n

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

\r\n

\r\n

\r\n

\n\n

请注意，box-shadowRGBA 边框颜色仅在 IE9+ 以及更新版本的 Firefox、Chrome、Opera 和 Safari 中受支持。（尽管后面的浏览器的旧版本可能支持该属性的前缀版本。）在不支持这两者的浏览器中，这会降级为仅内部黄色框。

\n