css玻璃样式,css实现半透明玻璃

CSS3如何实现磨砂玻璃背景效果

假如页面有一个背景和一个透明的盒子，我们先将盒子范围内的背景截取下来，在透明盒子之后设置一个伪元素用绝对定位格式化长宽让其跟透明盒子一样大小，在将伪元素背景设置为刚刚截取的图片设置模糊、设置z-index让伪元素在透明盒子之后，在给透明盒子设置一点阴影就好了。

核心代码如下

如何使用CSS打造毛玻璃效果

其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。

1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。

2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。

css制作毛玻璃效果好麻烦 wc3为什么不重视这种效果

如果仅仅是模糊的话你用一张图片模糊下不就搞定了，css都不用...

css也有blur的，在滤镜里面...

然后如果你毛玻璃想手指摸上去的地方变清晰的话，这个不是w3c重视不重视的问题了，属于css语言能力的问题，css本来就不是干这事的。

为什么css毛玻璃效果属性无用

只是用到了css滤镜(filter)中的blur属性。

CSS中的毛玻璃特效主要使用了filter属性里的blur（）函数，也就是高斯模糊滤镜。

但是要做一个好的毛玻璃效果，需要注意很多细节。

请问各位大神，CSS如何做这种像（1）玻璃透明的效果，（2）这种凹进去的黑色风格阴影分割线！谢谢了！

其实他这个是美工做好的两张图片，上面白色半透明样式的一张，下面一块大的一张。如果需要他这种效果，一模一样的话，你可以把他的图片下载下来你用。而那种格子阴影效果是可以用css3实现，但是太麻烦，对于做项目而言，得不偿失。对于学习而言，你可以试着做出来，用css3的transform:rotate(90deg)，和内外阴影试试。上面半透明，可以用rgba的颜色模式，和ie兼容的实现，最下面再来一条灰白色的线就是那种玻璃效果。

css样式。兼容各种浏览器的 毛玻璃效果。求解

-webkit就是针对，webkit核心浏览器的，典型CHROME，Safari

-moz是Mozilla核心，典型，火狐

-o-, -xv-，典型OPERA

-ms，一看就知道是微软了，一般省略

你加上其它厂商的标头试试，有部分不支持这属性，