1. 首页
  2. 程序生涯
  3. 前端攻城

CSS3给DIV左下角和右下角增加阴影

本人新搭建的一个论坛放肆网用的模版比较久了,发现在全屏模式下,论坛模块的阴影有点问题。看代码发现这个阴影是用图片实现的,全屏模式下会导致图片拉伸所以很丑。今天研究了一下,写了一个CSS3的的阴影。当然这样也有弊端。就是在一些低版本的浏览器上不支持!

.m-fl-g:before,
.m-fl-g:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 15px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
 
 
.m-fl-g:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }[/code]
最终效果图:CSS3模块阴影

原创文章,作者:锋哥,如若转载,请注明出处:https://www.fangsi.net/999.html

发表评论

登录后才能评论

评论列表(6条)

  • 小格鲁特 2017年12月13日 22:40

    支持一下,找到了我要的效果

  • 小背鼻 2014年12月19日 23:16

    真的很好用啊
    也很好看

  • Skyfrit 2014年8月2日 12:27

    还蛮酷的,谢谢分享。

  • 阿笨虎 2014年7月25日 18:17

    请问空间在哪买的???谢谢

联系我们

在线咨询:点击这里给我发消息

邮件:service@fangsi.net

工作时间:周一至周五,9:30-18:30,节假日休息