V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zhaoyafei
V2EX  ›  问与答

@Utom 大神的FaveFaveFave.com的热门标签的CSS圆角是怎么做到的呢?

  •  
  •   zhaoyafei · 2011-01-11 08:24:54 +08:00 · 4770 次点击
    这是一个创建于 5072 天前的主题,其中的信息可能已经有所发展或是发生改变。
    RT
    求助发问
    8 条回复    1970-01-01 08:00:00 +08:00
    karuto
        1
    karuto  
       2011-01-11 08:32:21 +08:00
    CSS3吧?
    karuto
        2
    karuto  
       2011-01-11 08:33:47 +08:00
    呃我错了抱歉,看了下源码,是图片然后用background-position吧应该。
    chone
        3
    chone  
       2011-01-11 08:40:16 +08:00
    背景图片是
    http://favefavefave.com/images-black/tagbg.gif

    DOM结构为
    <a>
    <span>text</span>
    </a>

    a节点有padding-left,background正常显示,no-repeat,
    span节点background显示最左边的部分,也就是background-position: 100% 0px;
    以上span显示的最左部分背景覆盖在正常的从右到左显示的a部分背景之上,就形成了一个完成的按钮
    a:hover时背景向下偏移形成鼠标经过效果
    sparklo
        4
    sparklo  
       2011-01-11 08:58:34 +08:00
    借问大家类似这样的图片都是自己做的么? 网上有比较好的诸如此类的图片库么? 我因为图片处理的功力几乎没有, 除非万不得已我都是css处理的.
    Danny
        5
    Danny  
       2011-01-11 10:06:54 +08:00 via iPhone
    不行就instagram 吧...
    kaktos
        6
    kaktos  
       2011-01-11 10:21:21 +08:00
    这个圆角用的是css sliding door,两张背景,a一个,里面span一个,参见http://www.alistapart.com/articles/slidingdoors/
    其实吧 ,直接用css3吧,IE9以下就让他们看直角呗~
    spark
        7
    spark  
       2011-01-11 10:38:59 +08:00
    会的人不用教就会
    不会的人教了也不会
    cliff
        8
    cliff  
       2011-01-11 11:32:56 +08:00
    都这么写网站现在,足够长的背景
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2165 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:44 · PVG 08:44 · LAX 16:44 · JFK 19:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.