1、给卡片元素添加 box-shadow
box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。
其中blur-raduis和spread-raduis是可选的。
下面是创建了多个阴影的 CSS 例子，阴影加了模糊效果，颜色是透明度很高的黑色:
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
2、使用 text-transform 属性给文本添加大写效果
CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。
3、更改元素的相对位置
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。
当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。
4、绝对定位的参照物是元素的父元素
接下来要介绍 CSSposition属性的取值选项absolute，absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。
5、固定定位的参照物是浏览器的窗口
接下来要介绍的是fixed定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动。
6、调整颜色的色相
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的hsl()属性做为对应的颜色描述方式。
色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
饱和度是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。
7、创建一个 CSS 线性渐变
HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变，下面是它的语法：
background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);
第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。
8、使用 CSS Transform skex 属性沿XY轴倾斜元素
skewX函数使指定元素沿 X 轴翻转指定的角度，想必你已经猜到了，skewY属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。
9、使用 CSS 和 HTML 创建更复杂的形状
:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必需的，但是它的值可以是空字符串。
10、了解 CSS 的关键帧和动画是如何工作的
animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。总共有 8 个animation属性。
animation-name设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。
animation-duration设置动画所花费的时间。
animation-fill-mode：指定了在动画结束时元素的样式。把animation-fill-mode设置成forwards来实现始终高亮。
当元素的position被指定，如fixed或者relative时，CSS 偏移属性right、left、top和bottom可以用在动画规则里创建动作。
opacity：改变透明度。
animation-iteration-count，这个属性允许你控制动画循环的次数。如果想让动画一直运行，可以把值设置成 infinite。
animation-timing-function规定动画的速度曲线。(比如，默认的值是ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括ease-out，动画以高速开始，以低速结束;ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。) 补充：在 CSS 动画里，用cubic-bezier来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
cubic-bezier函数包含了 1 * 1 网格里的4个点：p0、p1、p2和p3。其中p0和p3是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过(x1, y1, x2, y2)来确定p1和p2。综上，下面就是 CSS 贝塞尔曲线的例子：
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和linear一致。换言之，元素匀速运动。
