CSS代码二例：边框阴影效果与DIV层垂直居中

　　CSS代码二例：边框阴影效果与DIV层垂直居中，在本代码中，实现的是CSS边框阴影(很多时候被勇于顶部banner框)，及让框架内内容垂直居中。阴影效果做的不错，供新手参考学习，也欢迎提出整改方案。

　　示例：

<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>边框为阴影效果</title><br /> <style type="text/css"><br /> div {border-width: 1px; border-style: solid; padding: 1px;}<br /> .a {background-color: #F3F3F3; border-color: #FBFBFB;}<br /> .b {background-color: #D8D8D8; border-color: #E8E8E8;}<br /> .c {background-color: #FFF; border-color: #BBB; height: 100px;color：#ff0000;}<br /> .middle-veryhuo-4{ width:300px; border:#FF0000 1px solid; height: 300px; position:absolute; }<br /> .middle-veryhuo-4 div{ border:#009900 1px solid; height:20px; width:300px; position:absolute; margin-top:-10px; top:50%; left:0; }<br /> .middle-veryhuo-4 div div{ border:#330066 1px solid; height:20px; width:300px; margin-top:-12px; margin-left:-2px; position:relative; top: 50%; left:0; }<br /> </style><br /> </head><br /> <body><br /> <div class="a"><br /> <div class="b"><br /> <div class="c"><br /> 边框为阴影效果<br /> </div><br /> </div> </div><br /> <div class="middle-veryhuo-4"><br /> <div><br /> <div><br /> 让内容垂直居中<br /> </div><br /> </div><br /> </div><br /> </body><br /> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

CSS代码二例：边框阴影效果与DIV层垂直居中

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

CSS代码二例：边框阴影效果与DIV层垂直居中

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀