V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
zippera
V2EX  ›  CSS

请问图中红圈内的效果叫什么,怎么做出来的?

  •  
  •   zippera ·
    zippera · 2013-06-23 15:03:08 +08:00 · 5019 次点击
    这是一个创建于 3961 天前的主题,其中的信息可能已经有所发展或是发生改变。


    我看源代码里面用的标签是 box 和 drop-shadow 。一般叫做什么? css 怎么写?
    13 条回复    1970-01-01 08:00:00 +08:00
    yescola
        1
    yescola  
       2013-06-23 15:04:41 +08:00
    一个白色块和底部的图片叠加的吧。。。或者是白色块,在块的下面放个那样的图片。
    标签是啥无所谓了,爱怎么取怎么取。
    qiayue
        2
    qiayue  
       2013-06-23 15:10:07 +08:00
    阴影
    yescola
        3
    yescola  
       2013-06-23 15:18:03 +08:00
    @qiayue 言简意赅。。。
    zippera
        4
    zippera  
    OP
       2013-06-23 17:26:57 +08:00
    @qiayue 能否介绍下怎么用?
    tension
        5
    tension  
       2013-06-23 17:30:43 +08:00
    你再那里看到的 用firebug 去看一下就晓得怎么用啦!!!
    alay9999
        6
    alay9999  
       2013-06-23 17:31:57 +08:00
    两个一样大的矩形
    上白下黑
    黑色的变形
    黑色的模糊
    黑色的透明度

    这是PS流程

    CSS的话,我猜想是两个黑色阴影需旋转一定角度放在底下吧
    chairuosen
        7
    chairuosen  
       2013-06-23 17:40:57 +08:00
    -webkit-transform: rotate(-2deg);
    zippera
        8
    zippera  
    OP
       2013-06-23 18:35:20 +08:00
    @tension 谢谢,我用chrome的「审查元素」搞清楚了。
    zippera
        9
    zippera  
    OP
       2013-06-23 18:37:17 +08:00
    @chairuosen 感谢,正解。这是我刚总结的:http://zipperary.com/2013/06/23/box-and-shadow-effect/
    yangg
        10
    yangg  
       2013-06-23 22:00:16 +08:00
    good, 学习
    Keinez
        11
    Keinez  
       2013-06-23 23:31:27 +08:00 via Android
    敢情CSS3也能做这样的效果了,顿觉落伍…
    railgun
        12
    railgun  
       2013-06-24 10:39:06 +08:00
    这叫阴影,英文叫shadow
    loading
        13
    loading  
       2013-09-08 08:33:53 +08:00
    mark.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3665 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 00:56 · PVG 08:56 · LAX 17:56 · JFK 20:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.