菱形

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);这条属性可以生成一个自适应的菱形，可以应用动画，且能适应非正方形的图片。clip-path是裁剪的意思，polygon是多边形的意思。

来看下兼容性：
(点击查看大图)

实测连chrome都不支持。

第二章要点总结

• background-clip: padding-box背景覆盖区域。IE9+。
• outline可以再生成一层边框，可以通过outline-offset属性控制与元素的间距，可以接受负值。另外outline生成的描边不贴合border-radius。没有兼容问题。
• background-position可以接受right 20px bottom 10px这样的值，做到下对齐和右对齐。IE9+。
• background-origin类似background-clip，改变background-position对齐基准边缘。IE9+。
• calc()运算要在加减号两旁留白。IE9开始支持，但IE系列有各种不稳定表现，贴图如下：(点击查看大图)

@support

看到@support是不是感觉很熟悉？@support和@media一样，都是css中的条件规则。

@support的作用是检查浏览器是否支持相应的css3样式，示例如下：

1
2
3
4
5

@support (text-shadow: 0 0 .3em gray) {
    h1 {
        text-shadow: 0 0 .3em gray;
    }
}

意思是说如果浏览器支持text-shadow这个样式，就为h1元素增加text-shadow。这个有点像js中的能力检测，不关心具体各个浏览器的兼容情况，只对浏览器是否兼容某个特性做出判断，如果支持就应用，比较省心，也没有其他副作用。但是如果真的有这么省心就好了（微笑），让我们来看看兼容性：

(点击查看大图)

啊哦， IE 都不支持呢（再次微笑）。

先导

首先把正式章节的先导部分看过了，对本书有大概的了解。书中列出了一系列预备知识：

• 掌握css2.1，并有多年实践经验（例如懂得各种定位和单位，懂得继承和层叠，懂得盒模型等）。
• 了解过css3的特性，并曾尝试过（例如圆角、变形、渐变等）。
• 知道svg，即使不清楚应该怎么写。
• 可以读懂简单的javascript原生代码（例如操作dom）。
• 听说过css预处理器，并知道它们可以做什么。
• 达到高一数学的水平。

审视自己，应该是达到了以上要求。

今天我从预备党员转为正式党员了，在过去的一年预备期里，我是真的对党做了很多思考，尤其是在党的宗旨：全心全意为人民服务上。毕竟对人民的好，不是你觉得好就好，要对人民群众真的有益才行。

不久之前认识了一个住在天上，以飞机为家的人。他问，你的人生到底有多重？

想象一下，把你生活中的所有物件放进一个背包里。从小摆设小收藏开始，电子设备、书，再到衣服、被子床单、灯，接着更大件的床、沙发、桌子、汽车、房子。装好了，感受一下你肩膀上的分量。现在试着走走吧，还能走得动吗？

再想象一下将这整个背包付之一炬，第二天醒来身无一物的感受。是不是很刺激？

磨磨蹭蹭好久，博客终于上线了！

9.15 独木舟

今天是“户外运动日”，天阴冷，有点微微下雨。老师和学生会主席们一直为具体项目保持神秘感，总不能为了小小的天气问题白费力气。听着大巴里放的小黄歌，忍受十几分钟大幅的上坡下坡，刚过九点半，一行五十多个人来到了被丘陵环绕的目的地——卢瓦河（le loire），河边停靠了很多各式各样的小船，我们就大概猜到要干嘛了。

为了记录，也为以后留法的学弟学妹们积累经验。

从上海开始吧。