新奇的css

收集一些新奇的不常见的正在实验中的css属性，由于浏览器兼容问题比较少用，但是未来有可能会纳入正式标准，我们可以率先在新版浏览器体验一下（建议用Chorme浏览器）

position:sticky

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

可以用sticky来实现粘性布局，效果如下

css计数器

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。计数器的值通过使用counter-reset和 counter-increment操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

一个列表序号自定义样式

多行文本溢出

-webkit-line-clamp 是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。必须结合的属性为display: -webkit-box和 -webkit-box-orient: vertical，比如实现多行文本溢出

.content {
  width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

border-image

理解border-image属性首先需要理解border-image-source border-image-slice border-image-width border-image-outset border-image-repeat这5个属性，使用方法可以谷歌，可以使用border-image来给边框设置图片

writing-mode

设置或检索对象的内容块固有的书写方向。

horizontal-tb: 文字水平排版，元素从上到下，ie下值为lr-tb

vertical-rl: 文字垂直排版，元素从右到左，ie下值为tb-rl

vertical-lr: 文字垂直排版，元素从左到右，ie无对应值，可以用vertical-rl把元素倒序就行了