为元素创建圆角

• 创建四个相同的圆角：
  这步可选，输入：-webkit-border-radius: r; ，r是圆角半径。
  输入：border-radius: r; r和第一步值相同
  (将鼠标放在图形上可以查看属性，下面的都可以)

• 创建一个圆角：
  这步可选，输入：-webkit-border-x-y-radius: r; x和y为方位，可以取top、bottom、left、right
  输入：border-x-y-radius: r; r和第一步值相同
  重复使用上面属性即可创建多个圆角。

• 创建椭圆圆角：
  这步可选，输入：-webkit-border-radius: x/y; x是水平方向的半径，y是竖直方向的半径
  输入：border-radius: x/y; xy和第一步值相同
  重复使用上面属性即可创建多个椭圆圆角。

• 创建圆形：
  这步可选，输入：-webkit-border-radius: r; r取元素高度的一半，一半用百分比为单位(50%)
  输入：border-radius: r; r和第一步值相同

为元素添加阴影

输入-webkit-box-shadow: x-offset(水平偏移) y-offset(竖直偏移) blur-radius(模糊半径) spread() color(颜色);
输入box-shadow::值同第一步
添加内阴影：
输入-webkit-box-shadow: x-offset(水平偏移) y-offset(竖直偏移) blur-radius(模糊半径) spread() color(颜色) inset;
输入box-shadow:值同第一步

添加多重阴影：

输入-webkit-box-shadow: x-offset(水平偏移) y-offset(竖直偏移) blur-radius(模糊半径) spread() color(颜色) (inset);
输入逗号，重复第一步的各个值
输入box-shadow:值同第一、二步

取消阴影：输入-webkit-box-shadow: none; 和 box-shadow: none;

使用多重背景

输入background: 属性，为元素添加备用背景
输入background: 属性1，属性2, .. , 属性n; 为元素添加多重背景
这里的属性是用空格隔开的属性值表

使用渐变背景

创建备用颜色， 同上

定义线性渐变

输入background: linear-gradient(to x, color-1 loc-1, color-2 loc-2, …, color-n loc-n); (n>=2), loc可以省略, 浏览器自动指定

定义径向渐变

输入background: radial-gradient(circle或ellip或跳过(跳过则需指定size), size(可以跳过，默认最远角), pos(渐变中心位置, 可以是 at d(方位) 或 at x y), color-1 loc-1, color-2 loc-2, …, color-n loc-n); (n>=2), loc可以省略, 浏览器自动指定

可以定义多重渐变，每个定义之间用逗号隔开

修改元素的不透明度

格式：opacity: a(不透明程度，0-1);

生成内容

使用:before和:after可以为元素添加效果。

阅读更多

使用拼合图像

将多个尺寸相同的图像拼合为一个图像文件，使用的时候根据 background-position 进行定位即可。