CSS3.0

css3.0

为了满足各个浏览器的兼容性 加前缀
-webkit- 谷歌的浏览器内核
-ms- ie内核
-moz- 火狐 内核
-o- opera 内核

透明度

1.rgba 在css3.0中提出的表示颜色的方式,a指的是透明度
2.opacity（透明度）
3.transparent 表示全透明
rgba的透密和opcity的透明区别:
rgba的不会继承，opcity会继承

阴影

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。

文字阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值;
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

背景

背景

背景颜色 background-color
背景图片 background
背景大小  background-size
背景重复 background-repeat
背景图片居中 background-position:center top
背景附着 background-attachment:fixed
不平铺 no-repeat

裁剪背景

background-clip:
background-clip:content-box;
padding-box 把边框下面去掉
content-box 内边距下面 也没有背景

渐变背景

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,… 用于指定渐变的起止颜色。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

径向渐变 radial-gradient

 background-image: radial-gradient(red, green, blue);

去除插入白边的bug

插入图片的时候 两张图片之间会产生一个10px的白边
解决方式:
1.把图片转成块级元素
2. vertical-align: middle;

css3.0中的2D动画