芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
10

多层元素嵌套的圆角按钮

作者 芒果/分类 代码/发布于 2010-09-14 21:48

圆角按钮的实现看似并不困难,但会遇到如按钮宽度自适应文字长度等情况,不可能每次都切固定大小的背景图片。

自适应宽度的按钮,通常会采用类似下面的切图方法:

这样一来,只需要嵌套两层标签即可:

<a href="#"><span>按钮</span></a>

a 标签设定右侧块的圆角背景,span 标签设定左侧块的圆角背景以及内容区块,目前支付宝是这样做的。但前提需要保证按钮文案长度不会超过背景图片的宽度。

另一种切图的方案是分三块切,左侧一块,右侧一块,中间内容区域一块。

这样切图,事实上 a 标签也只需要嵌套两层即可实现自适应的圆角按钮。

<a href="#"><span><span>按钮</span></span></a>

a 标签设定右侧块的圆角背景,第一层 span 标签设定左侧块的圆角背景,第二层标签设定内容区域的水平平铺背景。但这种两层的方式在 button 标签上并不适用,需要通过一些乱七八糟的 hack 来干掉 button 标签各种表现上的缺陷。考虑到 a 标签按钮和 button 标签按钮的通用性,小小牺牲一下,套了三层标签。

具体请查看演示:round_corner_button.html

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/multi-element-round-corner-button/" title="多层元素嵌套的圆角按钮" rel="bookmark">多层元素嵌套的圆角按钮 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 10 条群众意见

  1. SOHO一族 /2010-09-15 11:33

    很好的设计思路,顶博主。 回应

    #1
  2. 我爱配搭 /2010-09-15 11:38

    相当实用,收藏! 回应

    #2
  3. 德意 /2010-09-15 21:01

    这个很多 cool,就可以不用背景图片了。 回应

    #3
  4. 书香阁 /2010-09-15 23:21

    收藏了,以后改改看。 回应

    #4
  5. 就下载 /2010-09-16 10:44

    很不错,谢谢。 回应

    #5
  6. 苹果iPhone价格 /2010-09-16 10:59

    不错不错!
    不知道博主的风格是否能共享呢?简介大方。。。喜欢啊。 回应

    #6
  7. 卢松松 /2010-09-16 15:54

    这个小功能不错。 回应

    #7
  8. yesureadmin /2010-09-16 19:35

    思路挺好的呀。 回应

    #8
  9. 学夫子 /2010-09-17 11:38

    我的博客在非 IE 下就是圆角,ie 下就不是圆角,看起来很不舒服。 回应

    #9
  10. IM路人 /2010-09-21 17:38

    这个收藏,以后可能会用到。 回应

    #10

下面我简单说几句