首先，::first-letter本身兼容性非常好，然而，细细体味，会发现，虽然::first-letter兼容性很好，浏览器很早就支持，但是我们实际项目用得并不多，那是因为，我们可以通过嵌套span标签的方式，实现更为广泛更灵活的样式控制。
但是，实际开发场景千千万，总会遇到HTML结构不能改动，或者改动成本很高的的情况，此时::first-letter等就非常有用，而且多半扮演英雄或者救星的角色……
“CSS相关”目录存档
深入CSS ::first-letter伪元素及其实例等
2016年09月30日，星期五从height:100%不支持聊聊CSS中的“死循环”
2016年09月16日，星期五大家应该都知道，如果元素没有格式化的高度值，子元素的height百分比高度是不起作用的，常见的就是height:100%无效，而宽度就没有此问题，所以，新人经常会提出的一个问题是：“为何我的div设置了height:100%却没有效果？”
不知道大家有没有思考过这样一个问题。
然后，有同行就提出了这么一个看似很合理的解释，就是，“假如父元素height:auto且没有其他格式化高度，子元素支持height:100%，则很可能会出现高度死循环”。
看似合理，实际上这种解释是表面的，错误的……
聊聊CSS世界中的margin-box
2016年09月16日，星期五盒尺寸由4个盒子组成，分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是，对于的CSS关键字中却没有margin-box，唯独缺了margin-box，这是为什么呢？
-webkit-box-reflect属性简介及元素镜像倒影实现
2016年08月14日，星期日玻璃，水面会有倒影，有时候我们在web中模拟一些效果，或者实现一些质感的时候，也是需要投影效果的。那我们该如何实现呢？本文从-webkit-box-reflect入手，按照浏览器，依次介绍各种投影效果的实现，很多demo，很多截图很多源代码展示，希望本文的内容能够对您的学习有所帮助！
Safari 3D transform变换z-index层级渲染异常的研究
2016年08月7日，星期日Safari被戏称为新时代的IE6，就是因为其有各种各种奇怪的渲染问题，或明显的渲染bug, 而这些bug都是IE浏览器不会犯的，着实让人头疼。
而本文这里要展示的3D变换影响层级渲染也是Safari浏览器专有的问题，不妨进来看看，说不定下次遇到类似问题就知道是怎么回事，该怎么解决了~~ 
如何在CSS中实现父选择器效果？
2016年08月7日，星期日虽然说至今尚无浏览器支持原生的父选择器效果，但是，我们是可以通过其他手段来实现父选择器效果的，虽说不是100%完全，但是，一般的项目需求都是可以满足的，如何实现呢？如果用一句话解释原理就是“把兄弟元素作为祖先元素使用”……
本文其他地方是看不到的哟~~
简单聊聊CSS选择器中的正则表达式
2016年08月7日，星期日没错，CSS也有正则，CSS装逼两利器：矩阵和正则。本文就简单介绍后面的正则，有示意有代码展示有截图有吐槽，希望本文的内容可以对您的学习有所帮助……
等宽字体在web布局中应用以及CSS3 ch单位嘿嘿
2016年07月9日，星期六所谓等宽字体，一般是针对英文字体而言的。东亚字体，据我所知，应该都是等宽的，就是每个字符在同等size下占据的宽度是一样的。但是英文字体就不一定了，就难本文来说，我下面写一个单词，什么呢，就iMac吧，大家打开自己的像素眼，就会很明显地发现这个字符’i’要不其他字符，例如’M’占据的宽度要小.但是，如果是等宽字体，宽度就一样，那么这种表现在web布局中有没有什么作用呢？还有CSS3 ch单位和他又有什么千丝万缕的关系呢？
小tips: IE7,IE8浏览器纯CSS实现正圆角效果
2016年07月6日，星期三CSS3 border-radius可以轻易实现圆还有圆角效果，然而，需要IE9+浏览器才行。移动端自然不成问题，但是众多（尤其面向C侧）PC页面是至少需要兼容IE8的，那有没有什么办法可以让IE7, IE8也支持圆角呢？
很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角。然后，本文再介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子……
我的应用
我的应用