css3初学

在css3的学习中，感到css3非常有趣，感觉css3其实是css的一种补充，原来的css在很多地方所不能展现出来的效果，在css3中得到很大的补充和结合

首先：css3在以下几个方面有很多的完善和补充：

一，装饰

如边框的装饰，引入了很多修饰标签：box-shadow，border-radius，border-image等

box-shadow通过设置使盒子拥有阴影，同时，可同时设置多个阴影，中间只需用逗号隔开即可。

对于border-image标签则和background标签类似，后面的属性值也非常相似，重点是repeat和round属性值用得比较多，repeat不多说，round则是使之圆满的铺满。

二，颜色渐变

1.线性渐变：linear-gradient(tobottom,#fff,#999)

To bottom渐变方向，等价于180deg（角度）

#fff，#999是颜色的起始和结束点，同样也可以设置多个颜色值

2.径向渐变：和线性渐变类似，形式不同。

两种渐变，重点是渐变方向的选取：

to bottom 是从上向下渐变

to left是从右向左渐变

to top left是从右下向左上渐变

由此可知，渐变方向设置中，我们只需设置方向的最终目的，而起始位置是最终位置的反方向

三，background

css3中又引入了很多background标签，使得图片的插入和修饰更加方便

background-origin：个人感觉和定位类似，不过更加简便，是设置图片的起始位置，其属性值： border-box | padding-box | content-box

background-clip：表示图片的剪切，属性值同样有：border-box | padding-box | content-box | no-clip

四，最为改变大的是，css3又引入了很多样式的选择器

伪类选择器：not empty root target等等，作用为顾名思义。

-nth-child

:nth-child（n）选择器用来定义某个父元素的一个或多个特定的子元素，其中n是其参数，而且可以是整数值（1.2.3.4），可以是表达式（2n+1,）和关键词（odd even），但参数n的起始值始终是1，而不是0，也就是说，参数的值为0时，选择器将选择不到任何匹配的元素

-nth-last-child(n)：”：nth-last-child（n）“选择器和前面的”：nth-child（n）“选择器非常相似，只是这里多了一个last，其作用是从元素的最后一个元素开始计算，来选择特定的元素

五，最为有意思的一点，css3引入了动画

Transition属性是一个复合属性，主要包括以下几个属性：

Transition-property:指定过渡或动态模拟的css属性

Transition-duration:指定完成过渡所需的时间

Transition-timing-function:指定过渡函数

Transition-delay:指定开始出现的延迟时间

Keyframes:关键帧，css3中主要以@keyframes开头，后面紧跟这动画名称加一对{ }

括号中这是一些不同时间段样式规则

至于-moz--webkit—o-前缀表示：-moz表示兼容火狐浏览器

-weblit对应safari and chrome  -o对应opera -ms对应ie

总之css3引入的所有东西，还需我们更加频繁的引用和掌握。