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

html-css011

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

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

不太明白你的意思，不过我根据我自己的理解，写了一个例子，如下图，如果是你想要的效果，就拿代码去用，如果不是，回复我一下，帮你调试！

html：

<div class="page">

    <div class="item"></div>

</div>

css：

.page{width: 600pxheight: 600pxborder: 2px solid #dddmargin: autoposition: relative}

.item{width: 200pxheight: 200pxoverflow: hiddenposition: absoluteright: 0top: 30%}

.item:before{width: 200pxheight: 200pxbackground: #23b7e5border-radius: 100%content: ""display: blockposition: absoluteleft: 50%}

<div class="tip1">这是个小提示</div>

<div class="tip2">这是个小提示</div>

<style>

.tip1{width:150pxheight:40pxline-height:40pxbackground:#FA5889font-size: 14pxcolor:#ffftext-align: centerposition: relativemargin:50pxfloat: left}

.tip1:after{content:" "border:solid 10px transparentborder-top:solid #FA5889 10pxwidth:0pxheight:0pxposition: absolutedisplay: blockleft:65pxbottom:-10}

.tip2{width:150pxheight:40pxline-height:40pxbackground:#37A7D7font-size: 14pxcolor:#ffftext-align: centerposition: relativemargin:50pxfloat: left}

.tip2:after{content:" "border:solid 5px transparentborder-bottom:solid #fff 5pxwidth:0pxheight:0pxposition: absolutedisplay: blockleft:65pxbottom:0}

</style>