网页制作CSS教程:自适应圆角

宫9081

宫9081

2016-02-20 00:19

下面图老师小编要跟大家分享网页制作CSS教程:自适应圆角,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

前言

有时候我们不得不面对圆角,也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案,但现实≠理想

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)需求3px 圆角 宽度自适应(随着文字字数扩展宽度并自动换行) 换肤 不使用图片(对可维护性/性能均有影响) 困惑

经典的解决方案看起来像这样:

!DOCTYPE htmlhtmlheadmeta content="text/html; charset=utf-8" http-equiv="Content-Type" /title传统方案及bug/titlestylebody{margin:100px;background-color:red;}div, p, b{margin:0;padding:0;}b{display:block;}.rc{display:inline-block;#display:inline;#zoom:1;}/* float 效果相同.rc{float:left;} */.rc1, .rc2, .rc .bd{border-style:solid;border-color:black;background-color:yellow;}.rc1, .rc2{height:1px;overflow:hidden;}.rc2, .rc .bd{border-width:0 1px;}.rc1{margin:0 2px;height:0;border-width:1px 0 0;}.rc2{margin:0 1px;}.rc .bd{padding:0 6px;line-height:1.5;}/style/headbodydiv class="rc"    b class="top"b class="rc1"/bb class="rc2"/b/b    div class="bd"        pFML!!!/p    /div    b class="bottom"b class="rc2"/bb class="rc1"/b/b/div/body/html

使 rc float: left 或 display: inline-block 或许能满足需求,不过 IE 6&7 出现 bug:IE6中依然显示为dispaly:block,而IE7中top 和 bottom缩成一坨,不肯扩展开来,而在 rc1/rc2/rc3 中插入文字

b class="rc1"XXX/b

则只能扩展到文字XXX的宽度,无法与 bd 对齐!
如果你能搞定,麻烦留言告诉我一下 :)

解决

试了几个方法均不通,也搜索不到这个 bug,这时想到了 Google 系产品的 1px 圆角按钮:

这是前 Google 视觉设计师 Doug Bowman 的功劳,后转会到Twitter(AD一下:@ytzong),Doug Bowman 为此写过一篇博文《Recreating the button》 demo在此。不过demo 也仅仅是 demo,产品中使用的还是某对天才工程师夫妇的神作,他们有足够的时间来做这项工作:

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

打开 Gmail,用 firebug 艹艹看了一下,心里暗骂一句:天才就是天才!
写了个简单的 demo(为了演示方便这里采用了盒谐的颜色):

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
!DOCTYPE htmlhtmlheadmeta content="text/html; charset=utf-8" http-equiv="Content-Type" /title自适应圆角/titlestylebody{margin:100px;background-color:red;}div, p{margin:0;padding:0;}.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}.div1{border-width:1px;}.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}.div2{margin:0 -2px;}.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}.pointer1, .pointer2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}.pointer1{left:-9px;border-right:6px black solid;}.pointer2{left:-8px;border-right:6px yellow solid;}/style/headbodydiv class="div1"div class="div2"div class="div3"pFML!!!/p/div/divdiv class="pointer1"/divdiv class="pointer2"/div/div/body/html

效果如下:

不仅满足了需求,代码量及结构嵌套也很少。

代码说明div1 实现上下两条边,div2 实现 2px 圆角处的 4个点(一般人只有3点),div3 实现左右两条边,div1 设置左右边框的原因是避免IE 6&7 中的一个盒模型的小 bug,有兴趣研究的话可去掉左右边框看下效果 pointer1 实现小三角的边框,pointer2 实现小三角的背景,此处利用了 border 来模拟小三角,这其中会遇到IE 6 的边框不透明 bug。另外,你也可以看看oocss的写法 宽度自适应利用的是 display: inline-block,注意IE 6&7 中的处理方式 #left:-2px 之前的 # 为 IE 6&7 hack,多写为*,这里用#一是表明偶的与众不同,二是微软的 Expression Web格式化 CSS 的时候若{}中出现*则会把代码搞乱,此处 IE 6&7 中出现了 margin-left 负值无效的 bug ,通过 position:relative 加 left: -2px 实现 meta content=text/html; charset=utf-8″ http-equiv=Content-Type / 不写为 meta charset=utf-8″ / 的原因是 IE 下中文标题会乱码

可以看出:IE 6&7 bug 众多的特点在此例中表现的淋漓尽致!

最后的话

阮一峰老师也写过一篇《制作Gmail式按钮》,配合强大的 jquery 来实现按钮各种状态,最后的总结也很精彩,修改一下下:

虽然这种按钮(圆角)的视觉效果比较理想,有很多设计上的优点,但是局限性也很大。一方面,它需要大量的冗余代码,与语义网的原则相违背

完美方案还是利用浏览器的自身特性提供对不同的浏览器分级支持,渐进增强(比如 IE 下显示为直角,对CSS 3支持较好的浏览器显示为圆角),这才是开发效率、可维护性、语义、性能的最佳平衡。

展开更多 50%)
分享

猜你喜欢

网页制作CSS教程:自适应圆角

Web开发
网页制作CSS教程:自适应圆角

CSS设计圆角自适应按钮教程

Web开发
CSS设计圆角自适应按钮教程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

圆角自适应宽度按钮的css实现

Web开发
圆角自适应宽度按钮的css实现

DIV+CSS:网页一行两列背景自适应

Web开发
DIV+CSS:网页一行两列背景自适应

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS教程:图片的自适应居中和兼容处理

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:图片的自适应居中和兼容处理

Div + CSS高度自适应解决方案

Web开发
Div + CSS高度自适应解决方案

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win7系统下如何设置和删除静态ARP

win7系统下如何设置和删除静态ARP

SEO入门教程:自然搜索结果PPC广告和热图

SEO入门教程:自然搜索结果PPC广告和热图
下拉加载更多内容 ↓