zhaoyafei
V2EX  ›  问与答

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

  •  
  •   zhaoyafei · Jan 11, 2011 · 5381 views
    This topic created in 5678 days ago, the information mentioned may be changed or developed.
    RT
    求助发问
    8 replies    1970-01-01 08:00:00 +08:00
    karuto
        1
    karuto  
       Jan 11, 2011
    CSS3吧?
    karuto
        2
    karuto  
       Jan 11, 2011
    呃我错了抱歉,看了下源码,是图片然后用background-position吧应该。
    chone
        3
    chone  
       Jan 11, 2011
    背景图片是
    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  
       Jan 11, 2011
    借问大家类似这样的图片都是自己做的么? 网上有比较好的诸如此类的图片库么? 我因为图片处理的功力几乎没有, 除非万不得已我都是css处理的.
    Danny
        5
    Danny  
       Jan 11, 2011 via iPhone
    不行就instagram 吧...
    kaktos
        6
    kaktos  
       Jan 11, 2011
    这个圆角用的是css sliding door,两张背景,a一个,里面span一个,参见http://www.alistapart.com/articles/slidingdoors/
    其实吧 ,直接用css3吧,IE9以下就让他们看直角呗~
    spark
        7
    spark  
       Jan 11, 2011
    会的人不用教就会
    不会的人教了也不会
    cliff
        8
    cliff  
       Jan 11, 2011
    都这么写网站现在,足够长的背景
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1157 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 17:57 · PVG 01:57 · LAX 10:57 · JFK 13:57
    ♥ Do have faith in what you're doing.