在以前遇到这个需求的时候，我们可能会想到用 JS 来操作内容的显式与否。现在，CSS3 的 transition 可以帮我们更简单地实现。

<ul><li ><div class="head">列表1</div><div class="body">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div></li><li><div class="head">列表2</div><div class="body">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div></li>
</ul>

.body {max-height: 0;overflow: hidden;transition: all 1s ease-out;
}li:hover .body {max-height: 300px;transition-timing-function: ease-in;
}

transition: all 1s ease-out; 这是一种简写，transition 有 4 个过渡属性：transition-property、transition-duration、transition-timing-function、transition-delay。transition-timing-function 规定了速度效果的速度曲线，它有以下几种约定的属性。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

有一些特殊的时段，比如需要降半旗，在大环境下，各大网站为了表示默哀，会把颜色鲜艳的图片变灰变暗，过了这段时间后再恢复原本的颜色。

过去，会让 UI 同学临时赶工改图，然后再上传更新，过程麻烦，还会造成存储空间的浪费。现在，CSS3 的 filter (滤镜) 属性可以更快地实现该需求。UI 同学改的，其实也是源图片的滤镜。所以，可以这样实现：

.header {background: no-repeat center center;background-color: #ccc;background-attachment: scroll;background-size: cover;margin-bottom: 0;background-image: url(xxx.jpg);filter: grayscale(100%);
}

未加 filter 的效果如下：

加了 filter 的效果：

filter 的属性还有很多，其中 blur 可以实现高斯模糊，类似 IOS7 的毛玻璃效果。contrast 可以调整图片的对比度。drop-shadow 会在图片的下方合成阴影效果，等等。

之前遇到过一个需求，注册登录界面的整体色调偏蓝色，连输入框的边框色都偏蓝。所以，产品希望输入框的颜色和光标都变为蓝色。

设置文本的颜色方便，但光标该怎么设置颜色？CSS3 的 caret-color 可以解决这个问题。

input, textarea {caret-color: blue;
}

它不仅对于原生的输入控件有效，对设置 contenteditable 的普通 HTML 标签也适用。

不过兼容性上，safari 的 PC 版从 V11.1 开始支持，wap 版从 V11.4 也开始支持了。当然 IE 目前还没有支持。

在以前，如果不想让别人选中你的页面里的内容，可以用 JS 来阻止鼠标事件。而现在，只需要一句 user-select:none; 的样式就可以搞定了。

body {user-select: none; // 页面中的文本不能被选中
}

除了 IE，兼容性都不错。在 IE 6-9 上，可以通过给 body 添加 JS 代码 onselectstart="return false;" 来解决。

反过来，对于无法被选中文本的页面，如果真想复制，也是有技巧的。方法很简单：打开 chrome 的 debug 模式，在 console 下输入 document.body.innerText，回车后就能愉快地复制了，嘿嘿~

手写原生 table 的时候，直接给单元格设置宽度并没什么作用，因为单元格的宽度是根据其内容进行调整的。但是，在使用 element-ui 的 el-table 组件时，却可以给每个单元格设置宽度。这是如何做到的呢？

打开 debug，看 table 的结构，会发现在 CSS 上有个属性：table-layout: fixed;。

table-layout 的默认值是 auto，当设置为 fixed 时，在 单元格 td 上设置的宽度就起作用了。用法很简单：

table {table-layout: fixed;width: 100%;
}

某个商城上曾看到过的，鼠标 hover 出现一道流光划过的效果。用到了 CSS3 的 transform、linear-gradient、transition 等特性。

<div class="img-light"><img src="xxx.jpg" width="640" height="384">
</div>

.img-light {position: relative;width: 640px;height: 384px;
}.img-light::after {content: "";height: 100%;width: 100px;transform: skewX(-25deg) translateZ(0);background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3) 50%, hsla(0, 0%, 100%, 0));position: absolute;left: -150%;top: 0;z-index: 2;
}.img-light:hover::after {transition: left 2s ease-in-out;left: 150%;
}

遇到过一种情况，点击当前层无需触发自己的事件，但可以触发下面那层的事件，我把这种情况理解为“透传”。也就是，点击自身并无反应，相当于直接点击在了下面那层上。

用 CSS3 的 pointer-events 实现很简单：

div {pointer-events: none;
}

设置为 none，在 MDN 上的解释是：元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

在某个博客中看到的美化 radio 和 checkbox 的写法。

.radio-beauty-container {font-size: 0;$bgc: green;%common {padding: 2px;background-color: $bgc;background-clip: content-box;}.radio-name {vertical-align: middle;font-size: 16px;}.radio-beauty {width: 18px;height: 18px;box-sizing: border-box;display: inline-block;border: 1px solid $bgc;vertical-align: middle;margin: 0 15px 0 3px;border-radius: 50%;&:hover {box-shadow: 0 0 7px $bgc;@extend %common;}}input[type="radio"]:checked+.radio-beauty {@extend %common;}
}

其原理是：

• 伪类选择器 :checked，表示对应控件元素（单选框或是复选框）选中时的样式

• 加号 + 相邻兄弟选择器，这个符号表示选择后面的兄弟节点

• 两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了

• 用 label 标签控制单/复选框的选中与否，for 属性锚定对应的单选框或是复选框，然后点击这里的 label 标签元素的时候，对应的单/复选框就会选中或是取消选中。

CSS3 有许多很赞的特性，可以呈现非常神奇且炫酷的效果。在这儿仅展示了一些我搜罗到的，觉得有意思的特效。大家如果有值得推荐的 CSS 特效，也欢迎一起探讨学习哈~

莉莉丝游戏招 中高级前端工程师  啦！！！

你玩过《小冰冰传奇（[刀塔传奇]）》么？你玩过《剑与家园》么？

你想和 薛兆丰老师 成为同事么？有兴趣的同学，可以 关注下面的公众号 加我微信 详聊哈~