css内边框效果代码实例
分类:实例代码
分享一段代码实例,它实现了内边框效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body { padding: 0; margin: 0; font-size: 22px; color: white; text-align: center; font-weight: 700; } div.warp { width: 500px; height: 297px; margin: 50px 0 0 100px; position: relative; border-radius: 10px; cursor: pointer; } div.warp img { width: 500px; height:290px; border-radius: 10px; } div.warp .mask { width: 500px; height: 248px; position: absolute; top: 0; background: white; opacity: 0.4; display: none; border-radius: 5px; } div.warp .bottom_style { width: 492px; height: 242px; position: absolute; bottom: 0; left: 0; border: 4px solid #54a219; border-bottom: 52px solid #54a219; display: none; border-radius: 10px; } div.warp:hover .show { display: block; } div.warp span { vertical-align: middle; display: inline-block; position: absolute; bottom: 10px; left: 25%; } </style> </head> <body> <div class="warp" id="touch"> <img src="http://www.pipipi.net/demo/CSS/img/2.jpg" id="img"> <div class="mask show"></div> <div class="bottom_style show"></div> <span>url是www.pipipi.net</span> </div> </body> </html>
css内边框效果代码实例,这样的场景在实际项目中还是用的比较多的,关于css内边框效果代码实例就介绍到这了。
css内边框效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。