clowwindy的杂草牧场

   :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理
  34 Posts :: 2 Stories :: 74 Comments :: 0 Trackbacks

公告

在普通的WebKit浏览器上,可以用CSS3轻松的加一个柔和的阴影效果:

box-shadow: 3px 3px 3px rgba(0,0,0,0.5);


不过在目前版本的Qt Webkit上,由于不支持阴影的模糊算法,阴影会显示的很生硬。由于项目用到QtWeb,不可变更,只能想一个变通的办法。

最后想到因为阴影可以加多个,所以我们可以加若干个偏移不同的阴影叠加起来,使它看起来是模糊的:

-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.1), 4px 4px 3px rgba(0,0,0,0.1), 3px 3px 3px rgba(0,0,0,0.1), 2px 2px 3px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.1);



那么内发光的效果怎么做呢?来一圈就可以了:

    -webkit-box-shadow:inset -1px 0 4px 0 rgba(68,148,238,0.2),inset 0 -1px 4px 0 rgba(68,148,238,0.2),inset 1px 0 4px 0 rgba(68,148,238,0.2),0 1px 4px 0 rgba(68,148,238,0.2),inset 0 0 4px 0 rgba(68,148,238,0.2),inset -2px 0 4px 0 rgba(68,148,238,0.2),inset 0 -2px 4px 0 rgba(68,148,238,0.2),inset 2px 0 4px 0 rgba(68,148,238,0.2),inset 0 2px 4px 0 rgba(68,148,238,0.2);



posted on 2011-10-14 15:15 clowwindy 阅读(...) 评论(...) 编辑 收藏