最新消息:本站全面升级HTTPS~~

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

前端攻城 锋哥 8141浏览 0评论

本人新搭建的一个论坛放肆网用的模版比较久了,发现在全屏模式下,论坛模块的阴影有点问题。看代码发现这个阴影是用图片实现的,全屏模式下会导致图片拉伸所以很丑。今天研究了一下,写了一个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); }

最终效果图:CSS3模块阴影

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (6)

  1. 请问空间在哪买的???谢谢
    阿笨虎4年前 (2014-07-25)回复
    • QQ群里已经发给你了。
      胖子4年前 (2014-07-28)回复
  2. 还蛮酷的,谢谢分享。
    Skyfrit4年前 (2014-08-02)回复
  3. 真的很好用啊 也很好看
    小背鼻4年前 (2014-12-19)回复
  4. 支持一下,找到了我要的效果
    小格鲁特1年前 (2017-12-13)回复

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册