今天莫名的累，借此机会水一篇好了

合适的鼠标光标

为了给用户带来良好的体验，鼠标在网页中有着不可忽视的作用。不同的鼠标光标暗示着不同的信息。下图是CSS3中新的一批内建光标：

折角效果

有时候会把一个元素的右上角进行折叠，使元素显得更加有立体感。
要实现这种效果通常可以在右上角增加两个三角形：一个三角形来体现折页的形状，另一个三角形遮住元素的一角，用来模拟翻折所产生的缺口。但是这两种方式有以下两个缺陷：

• 当折角元素之下的背景不是纯色而是一幅图案、一层纹理、一张照片或者渐变等，上面这种方式就不能完美实现了。
• 当折角不是45°时也不能够完美实现。

这时候可以用下面这种方式解决

染色效果

有时候会遇到这样一种场景:需要给图片增加染色效果，当发生hover或者交互时再把染色效果去除。
最容易想到的是以下两种方式：

• 把图片做成两个版本，然后用CSS使得两个版本交替呈现。这种方式会导致更大的文件体积和额外的HTTP请求，同时也不便于维护(想改变染色主色调时需要重新制作图片)。
• 还有一种方式，可以在图片上方覆盖一层半透明的纯色或者把图片设置为半透明并覆盖在一层纯色背景之上。这种方式会降低图片的对比度。

为了避免上面两种方式带来的问题，可以用下面这两种纯CSS的方式解决

单侧投影

有时候会遇到给元素设置单侧投影的情形。要想实现单侧投影，首先得了解box-shadow的工作原理。
平时使用box-shadow的方法是指定三个长度值和一个颜色值：

box-shadow: 2px 3px 4px rgba(0,0,0,.5);

此时，shadow是通过下面四个步骤绘制的：

• 以该元素相同的尺寸和位置，画一个rgba(0,0,0,.5)的矩形
• 把它向右移2px，向下移3px
• 使用高斯模糊算法(或者类似算法)将它进行4px的模糊处理。模糊算法本质上是在阴影边缘发生阴影色和纯色透明色之间的颜色过渡，其长度近似于模糊半径的两倍(这里是8px)
• 最后，将模糊后的矩形与原始元素的交集部分切除掉，因此模糊的部分看起来是在该元素的后面，其实是和原始元素位于同一层。

梯形标签页

梯形标签在导航栏部分经常遇到，书中只提到3D旋转的方案，但是万能的裁切和渐变怎么能丢？于是有了下面三种方式。

裁切方案

在形状这部分，裁切是一种很强大的方式，以左上角为原点，梯形的绘制对于它来说很简单。

<div class="echelon-a">this is a test</div>
div{
    margin:20px;
    max-width: 10em;
    min-height: 4em;
    font:125%/4em sans-serif;
    text-align: center;
    color: white;
}
.echelon-a{
    background: #58a;
    -webkit-clip-path: polygon(20% 0,80% 0,100% 100%,0 100%);
}