border 的简写其实是由 border-width，border-style，border-color 三个属性组合而成的。1px 就是 border-width，solid 就是 border-style，#ccc 就是 border-color。
display：none; //隐藏
display：block; //出现
雪碧图：
背景渐变：
径向渐变 (radial-gradient)
不同于线性渐变，径向渐变是一种由指定渐变的中心按照设定的大小，向外成圆型或椭圆形扩散的渐变。其标准语法如下：
background: radial-gradient(position, shape size, color-stop, ..., color-stop);
position：指定渐变中心的位置，可用百分比指定径向渐变圆心的坐标值，或者用长度值指定径向渐变圆心的坐标值，也可以设置left, right, top, bottom, center等位置值
shape：定义渐变的形状，取值如下：
circle 指定圆形的径向渐变
ellipse 指定椭圆形的径向渐变，默认值
size：定义了渐变的大小，取值如下：
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
color-stop：跟线性渐变的色标一样。
注：默认情况下，渐变中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
下面我们以具体实例演示。
例子: 等间距色标
默认来说，像线性渐变一样，色标之间是等间距的。
#gradient{background:radial-gradient(red, yellow, rgb(30, 144, 255));}
例子: 指定间距色标
当然我们可以给色标指定特定的位置,使其不均匀分布展示。
#gradient{background:radial-gradient(red 5%, yellow 15%, rgb(30, 144, 255)60%); }
例子: 指定渐变的形状（shape）
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#gradient1{background:radial-gradient(circle, red, orange, yellow); }#gradient2{background:radial-gradient(red, orange, yellow); }
例子: 指定渐变的尺寸（size）
size 参数定义了渐变的大小，可通过下面的例子查看size设置为不同值得效果。
#gradient1{background:radial-gradient(circle closest-side, red, orange, yellow); }#gradient2{background:radial-gradient(circle farthest-side, red, orange, yellow); }#gradient3{background:radial-gradient(circle closest-corner, red, orange, yellow); }#gradient4{background:radial-gradient(circle farthest-corner, red, orange, yellow); }
例子：重复的径向渐变
radial-gradient不支持自动重复的色标。然而我们可以通过设置repeating-radial-gradient来实现重复的效果。
#gradient{background:repeating-radial-gradient(red, orange 10%, yellow 25%);}
