超圆滑圆角框的半完美解决方案

2016-02-19 17:45 8 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享超圆滑圆角框的半完美解决方案吧。

【 tulaoshi.com - Web开发 】

   圆角框,因为其样式比直角框漂亮,所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计,成为一道亮丽的风景线。然而,就是这个圆角,却成为了网页前端人员心中永远抹之不去的阴影,对它,可以说是又痛又爱。爱的是它的漂亮,痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。

  让我们来回顾一下目前网络流行的都有哪些解决方案。

  第一种:无图片纯css圆角框

  收录理由:兼容性强,不用图形


图一 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  特点:

  1. 不用任何图形,使用很多个div容器模拟出圆角效果。

  2. 兼容性:通杀所有浏览器。

  缺点:

  1. 构造这个圆角需要加入太多的无语义的标签,结构比较冗余。

  2. 重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则其灵活性不够。

  3. 边框颜色虽然可以调节,但会对页面中的结构产生致命的影响,适用于色彩单一并且一个页面中圆角应用不多的页面。

  4. 不容易实现圆弧内有渐变色的图形背景。

  5. 圆角框不够圆滑,有锯齿现象,适合于背景色和当前色色差不大并且圆弧较小的网页。

  实现原理:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  用很多1像素高的div容器,利用背景色和边框色来模拟出圆角框的轮廓线。

  实例演示: http://www.cssplay.co.uk/boxes/snazzy.html

来源:http://www.tulaoshi.com/n/20160219/1615991.html

延伸阅读
随着中小企业在我国的蓬勃发展,越来越多的网络服务器会逐步进入千千万万的中小企业,与此同时,很多大的企业、机构随着业务的扩充分支机构也不断增加,这些用户需要购置网络服务器来满足业务发展的需要。但是这些用户受企业状况、资金预算的限制往往无法购置价格昂贵的基于SCSI接口的网络服务器,他们通常会选择性能较差、无冗余支持的ID...
计算系统与信息网络不停顿的运行与连接即高可用性已成为各行业特别是要求实时行业业务运行的基本要求。 惠普凭借丰富的经验创制的HP NetServer为您提供当今市场上最完备的高可用性系列产品和最优质的服务,使您的关键业务应用程序能连续可靠地高效运转。惠普还与业界领先的软硬件供应商联袂,为优化您的业务环境提供最...
微软在桌面系统上的成功,令我们不得不大量使用它的办公产品,如:Word,Excel。时至今日,它的源代码仍然不公开已封锁了我们的进一步应用和开发。然而在要求更高的服务器领域,微软本身的产品移植性不好, 性能不佳。在我们实际的开发中,表现层的解决方案虽然有多样,但是Ie浏览器已成为最多人使用的浏览器,因为大家都用Windows。在企业...
随着ADSL宽带接入技术的成熟,各种全新的技术应用已经深入到千家万户,由此引发的故障也随之而来。下面,笔者将维护过程中遇到的几则ADSL宽带经典故障分享给大家,希望能够给ADSL用户一定的帮助。 一、拨号时出现678错误 帮障表现:Windows XP SP2操作系统,ADSL虚拟拨号用户。点击“宽带连接”时出现678错误。...
标签: 电脑入门
当您尝试运行 Windows Server 2003、 Windows XP、 Windows 2000 或 Windows NT 4.0 的计算机中注销时,可能会遇到下列症状: 1、备份可能无法启动。从备份程序的应用程序日志中有错。但是,如果您看到事件 ID 1524,备份已运行。 2、当您尝试在 Windows 2000 中注销时,很长的时间,将显示"正在保存设置..."消息,Windows 会停止...

经验教程

271

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部