css3玻璃融 |css左侧菜单栏

.box {
background: url(images/glass-texture.jpg) repeat;
border-radius: 10px;
padding: 20px;
width: 600px;
margin: 0 auto;
position: relative;
}
.box:before {
content: "";
position: absolute;
left: -10px;
top: -10px;
background: rgba(255, 255, 255, 0.2);
z-index: -1;
border-radius: 10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.box:after {
content: "";
position: absolute;
left: 50px;
top: 50px;
background: rgba(255, 255, 255, 0.2);
z-index: -1;
border-radius: 50%;
width: 200px;
height: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

以上代码实现了一个简单的玻璃融效果，大家可以通过设置背景、边框半径、位置与渐变等属性来达到更好的效果，同时还可以使用JavaScript来实现动画效果，增强用户交互与体验。

总的来说，CSS3玻璃融效果是一项非常实用的Web前端技术，在日常的页面设计与开发中都有着广泛应用，并且具有无限的创意与可能性。