立体感的边框阴影效果
分类:实例代码
立体感的边框阴影效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了带有立体感的边框阴影效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body { font-family: Arial; font-size: 20px; } body, ul { padding: 0; margin: 0; } ul { list-style: none; } .wrap { width: 70%; height: 200px; text-align: center; margin: 50px auto; background: #fff; } .wrap h1 { font-size: 25px; line-height: 200px; } .effect { box-shadow: 0px 1px 4px rgba(0,0,0,.2),0 0 40px rgba(0,0,0,.1) inset; position: relative; } .effect:before, .effect:after { content: ''; background: #fff; position: absolute; top: 50%; bottom: 0; left: 30px; right: 30px; box-shadow: 0 0 30px rgba(0,0,0,.8); border-radius: 100px/10px; z-index: -1; } </style> </head> <body> <div class="wrap effect"> <h1>曲线阴影</h1> </div> </body> </html>
上面的代码实现了我们的要去,更多内容参阅相关阅读。
相关阅读:
(1).box-shadow属性参阅CSS3 box-shadow一章节。
(2).border-radius参阅CSS3 border-radius一章节。
(3).z-index参阅CSS z-index一章节。
(4).rgba()参阅CSS3 RGBA一章节。
立体感的边框阴影效果,这样的场景在实际项目中还是用的比较多的,关于立体感的边框阴影效果就介绍到这了。