纯CSS圆角框3：圆角化图片
|
文章导航： 第一章：根基的圆角框 第二章：透明圆角化配景图片 在前面一篇文章中，我们将一张上下渐变的的图片作为问题的配景，并将它应用了圆角结果。是不是这种圆角框只能用于较量单调的图片呢?我们还能将一些颜色较量富厚的图片也举办透明圆角化吗? 谜底是必定的，下面看看它的终极工夫。 照旧先看最终结果图吧!
图一 看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的结果，我特意应用了一个配景图片，你可以下载本模子到你的电脑中，随意伸缩窗口的巨细，看看外圆角是否是透明的。 有了这种结果，你再也不愁给每一张图片作圆角的事变，这种结果在一些图片类的演示页面中常常见到，出格合用那些图片较量多的列表中。怎么样，结果还可以吧! 好了，我们来看看它的实现机制吧! 实现道理： 这种结果着实就是我在第二章中变体实现，下面讲一讲首要的要害代码。 首要变革的照旧配景图片的定位，只是这一次与第二章中的有些差异，这次必要思量到下面的两个圆角的变革。 先看看上面两个圆角的实现：
再看看下面两个圆角的样式配置，下面部门和上面部门是彼此对应的。
差异的图片挪用样式： 前面两句配合组成边线框的颜色值，必要配置成统一个色值，后头的一句配置图片的挪用路径。 三句话就搞定一种颜色方案了。 弱点： 对付这种用纯CSS来实现的圆角框，不得不说说它的缺陷。 1. 语义化不足好，由于其圆角所有由HTML布局标签堆砌而成，而这些标签在字面上讲没有任何的寄义，满是为了样式的示意而存在的，以是造成HTML代码无故增多，倒霉于SEO优化。这也是各人所诟病的处所，也是宽大前端工程师不喜好它的最大缘故起因。 2. 样式的界说较量伟大，可操纵性繁琐，假如没有弄懂道理，会认为特贫困。 3. 边线框宽度只合用于较小的值，无法界说线框的巨细，由于一高出1px的宽度值，就会发生较量直观的锯齿。 4. 圆角不能调理巨细，假如要模仿更油滑的结果，就必要添加更多的容器，造成布局越发伟大。 5. 不太得当对图形要求较量高的场所，由于它不足油滑，假如将它放大会看到一些锯齿。 利益： 说了这么多弱点，也要来说说它的利益： 1. 兼容性好，这种圆角框通用于所有的赏识器，不存在兼容性题目。 2. 弹性自顺应宽度高度的巨细变革，出格合用于流体机关的页面中行使。 3. 可自界说边框和配景致，为所欲为地改变气魄威风凛凛。 4. 不必要建造圆角图片，节省收集流量，而且也可以镌汰或低落计划职员的事变量，镌汰前端职员机关定位的兼容性事变。 扩展性： 假如将它的不敷尽最大化地削弱，那么这将是一种不错的结果，我想这些事变就必要JS来参加了，而这样的话已超出本文问题的范畴了。而且这种JS的圆角框已经有了较量成熟的作品了。 本模子在以下赏识器中美满通过： IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。 完备DEMO：
（编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
