新的标签

马上就要进入过度与动画的学习了。在各种标签前需要运用-webkit-或者-moz-等说明适用解释器，感觉要比现在的东西难很多。今天讲了几个比较复杂的标签那么下面来总结一下！

总结：

1.伪类标签：before和after

他们的作用是在段落或内容前后增加一些不可框选的元素，例如引号，提示符等等。

使用方法：. blockquote : before { content : open - quote; }

    . blockquote : after { content : open - quote; }

效果：在一段引用文本的开头和结尾各添加一个引号，并且这个引号不能被框选。

2.图片边框：border-image

在使用前需要先定义border-width，否则可能会容纳不了所使用的图片。

border-image引用图片的地址后，还需要说明图片的铺放方式和长度取值，这个取值不可以带单位。

使用方法：border - width : xx px;

    border - image : url ( xx.jpg ) xx xx xx xx repeat(或者round，默认为拉伸strech);  其中XX表示长度取值，依次为上右下左。

3.阴影：box-shadow

使用方法：box - shadow : xx px  xx px  xx px  xx px  #xxxxxx；这个是最简单的写法，其中XX取值分别为左缩进，上缩进，大小增加，模糊度以及颜色。

当颜色写为rgb形式的时候，我们可以使用rgba（x,x,x,x）来说明颜色，其中前三个位红绿蓝配色比，第四个X取值为透明度。

4.线性渐变效果 ：-webkit-或者-moz-   linear-gradient

使用方法： linear - gradient ( # xxxxxx , # xxxxxx )其中2个颜色取值代表由什么颜色渐变为什么颜色，前一个颜色为起始颜色后一个为结束颜色。如果不设 置起始的方向和位置，那么默认由上到下渐变。颜色可以添加多个，并且也可以使用RGBA的形式更改颜色的透明度。

要更改起始方向和透明度：在颜色前一个逗号，前加上方位top或者bottom等，也可以使用top left形式描述的更精确，也可以选择角度，格式是xx deg。

5.镜像渐变： -webkit-或者-moz-   radial-gradient

和线性渐变相似，只是渐变起始位置固定在中心位置。

使用方法 ：  radial-gradient (  #xxxxxx , xx%  )其中前一个表示起始颜色，后一个取值为颜色在渐变中所占的比例，可输入多个颜色，比例相加要等于 100%。