![w3cplus周刊 w3cplus周刊](http://cdn1.w3cplus.com/cdn/farfuture/oI7G24s4YSyOyjzjH1u8rquG5pPixNGjiRgC10mn02o/mtime:1414768262/sites/default/files/w3cplus-zoukan2.jpg)
在这一期周刊主要向大家推荐了四大块内容:dipslay:table布局的魅力,CSS3中2D变形造成文本锯齿是如何解决以及如何制作渐变边框效果,Sass中编写三次贝塞尔(Cubic Bézier)典线函数和如何将Sass和OOCSS结合在一起,更好维护和管理你的前端代码,自定义Web icon font方法,最后介绍iPhone6中如何实现自适应布局。
![](http://cdn2.w3cplus.com/cdn/farfuture/opIjX1dcIZnSASeM5RI0NggnCo0Q2v8M9NWiDoDJsZc/mtime:1414464773/sites/default/files/display-table-anti-hero.jpg)
CSS布局中的英雄:"display:table"
表格布局是一种古老而又传统的布局,而在CSS中使用display:table来模拟表格,可以让你的块元素具备表格的特性,特别是在CSS布局中更让你变得更方便,比如实现垂直水平居中、等高布局等,可以说是CSS布局中的蜘蛛侠。
![](http://cdn1.w3cplus.com/cdn/farfuture/OM6ueCyVhAkY8bBWq2Y5gKf4z_w2fghyUlWExgsw7sQ/mtime:1414467056/sites/default/files/sass-compass_0.jpg)
使用Sass来编写OOCSS
使用OOCSS可以使你的样式耦合度降到最低,但随着而来要考虑的是多类与单类的问题。但随着Sass这样的预处理器的出现,使用Sass来编写OOCSS,将让你的代码变得更简洁,维护更方便。文章中借用一个按钮的示例,向大家阐述了如何使用Sass结合OOCSS来编写Web组件的样式。
![](http://cdn.w3cplus.com/cdn/farfuture/02CTZFFV9RtVXV6ilGMN_cr156IjrRMyCv6yzo0_Kbg/mtime:1414467874/sites/default/files/css3-please.png)
如何创建渐变边框
渐变是CSS3中重要属性之一,也是常用属性之一。众说周知,主要使用Gradient来替代渐变图片,但有很多时候设计师给边框设计渐变颜色,这将是一个纠结的事情。我想很多同学都是依赖于图片来实现这样的效果。在这篇文章中作者通过CSS3的Gradient和border-image两个属性的结合,制作渐变的边框效果。
![](http://cdn.w3cplus.com/cdn/farfuture/oTbMLQxr44DAML6atdubj6tN768OZM4cgAjEDby1nxk/mtime:1414469068/sites/default/files/symbo-font-621x320_0.jpg)
Illustrator与IcoMoon制作Web Icon
Icons在Web设计中可以起到画龙点眼之作用,但当前时代使用图片Icon,在Web中起到的限制越来越多。以致于SVG、Web Font等方式来制作Icon,因为这些方法制作出来的Icon是矢量图标,可以随意放大缩小,修改颜色等。这篇文章中就介绍了如何使用Illustrator制作图软件和IconMoon应用,制作一套适合自己站点的Web Font Icon。
![](http://cdn.w3cplus.com/cdn/farfuture/XF2HyILBL4iwUL3mXGz4Ls9lFk8uoSxe_4bXS-8vrdM/mtime:1414576304/sites/default/files/cubb-full.jpg)
Sass编写三次贝塞尔函数
三次贝塞尔(Cubic Bézier)在CSS3中动画制作中起着举足轻重作用,但确定三次贝塞尔曲线的值是件令人头痛的事情。虽然在线有相关工具提供,但还是少不了麻烦。如果你是一位Sass爱好者,那么这篇文章将会告诉另一种实现三次贝塞尔曲线的方法。那就是在Sass中定义三次贝塞尔曲线函数。
![](http://cdn1.w3cplus.com/cdn/farfuture/4mX2E80e73G6MtZr34yRQi2FjsrW7qa4axZSVzk1YzE/mtime:1414577551/sites/default/files/Fixing_Typography_Inside_of_2-D_CSS_Transforms.jpg)
解决CSS中2D Transform引起的文本锯齿
使用CSS3中Transform中2D旋转时,会造成文本产生锯齿。这个现象在众多浏览器中都无法避免,也常常令同学们头痛。碰到这种现像的同学都在网里找相关解决方案或者在群里部如何解决。今天推荐一篇有点老的文章,教你如何让你的文本在使用旋转之后也不会产生任何锯齿。
![](http://cdn1.w3cplus.com/cdn/farfuture/5lM8Qwb4f4kQOfgzk_vgSJWRUZISuJf01z_3GJJUlm0/mtime:1414767631/sites/default/files/Instagram-rotate-size-class.gif)
iPhone6中自适应布局
iPhone6和iPhone6 plus的出现,对于做相关开发的人员都是一件不易的事情,主要是因为其尺寸做了变化。不管原生开发还是Web开发,都不得不去关注如何适配他。这篇文章虽然仅介绍了如何在Native做iPhone6的适合,但我想这也是一种思路,可以探讨这样的方式是否可以应用于Web的开发中。