原文简介：

CSS 奇技淫巧，在这里，都有。

本系列文章围绕 **CSS/Web动画** 展开，谈一些有趣的话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。

本文档为个人学习使用，记录在学习iCSS的过程中的想法同时自己复现原文中的内容，有兴趣的同学可以参考~

个人认为最重要的是在学习的过程中多了解css的各种特性，以及样式设计的复用性考虑，而不是单纯为了解题，一定要多看MDN文档。

==建议网页显示和源文件配合享用~== tips: chrome使用ctrl+点击可以在新标签页打开网页

文章列表

1、下面这个左边竖条图形，只使用一个标签，可以有多少种实现方式：

源文件

2、类似下面这样的条纹边框，只使用一个标签，可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型：

源文件

3、层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？

源文件

4、从倒影说起，谈谈 CSS 继承 inherit

源文件

5、纯 CSS 实现单行居中显示文字，多行居左显示，最多两行超过用省略号结尾

源文件

6、 全兼容的多列均匀布局问题

源文件

如何实现下列这种多列均匀布局：

---

Extra_thinking — 关于box-sizing不同盒子中内容位置的思考

源文件

---

7、全兼容的最后一条边界线问题

源文件

看看下图，常见于一些导航栏中，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷最优雅的实现？

---