盒模型

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%);}