CSS3学习笔记（一）

css
1、边框
1.1边框的样式：border:width style color;
1.2边框四个角的半径
border-top-left-radius:(top)#px/% (left)#px/%;
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
或者直接 border-radius:


1.3边框阴影
box-shadow:h-shadow(水平阴影的位置) v-shadow（竖直位置） （必需）
blur（模糊距离） spread（阴影尺寸） color(阴影颜色) inset/outset(阴影是在内部还是外部) （可选）


1.4边框图形
border-image:下面属性可以一起赋值在一起，简写
border-image-source: url();图片地址 
border-image-slice: 边框向内偏移量
border-image-width: 图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)


2、css3背景控制
2.1背景颜色:
background-color:color;
background-clip:content-box/padding-box/border-box;(经过实验，这个貌似没有什么作用)
2.2、背景图片
background-origin:content-box/padding-box/border-box;
（只用于确定背景图片用于定位的地方，而不是定位背景图片）
background:url();其中url中的地址必须是相对于css文件的地址，而不是相对于html的地址
2.3背景图片的大小
border-ground-size:width height;


3、新文本效果
text-shadow:h-shadow v-shadow blur（模糊距离） color;
（如果h-shadow和v-shadow都是0的话，相当于阴影和元素重合，如果有值的话（可正可副）则会偏移，然后在使用模糊距离）
word-wrap:normal/break-word(可以使一个单词断开（换行）);


4、
4.1   2D转换效果
使用属性 transform:(2D/3D转换都是使用这个)
属性值：translate(x,y) 沿着x和y移动相应的距离
translateX/Y(n)沿着x/Y轴移动n的距离
scale(x,y) 在x和y方向缩放x和y倍 如scale(2,4)
scaleX/Y(n)在x或者y方向缩放n倍
rotate(angle)顺时针旋转angle角度(可正可副) 例如angle=20deg
skew(x-angle,y-angle) 沿着x轴和y轴旋转相应的角度
skewX/Y(angle)旋转角度
4.2   3D转换效果
transform:  
translate3d(x,y,z)
translateX/Y/X(n);
scale3d(x,y,z);
scaleX/Y/Z(n);
rotate3d(x,y,z,angle));
            rotateX(angle);
            rotateY(angle);
            rotateZ(angle);


对于不同的浏览器
transform:
-ms-transform:(IE)
-webkit-transform:(safari chrome)
-o-transform:(opera)
-moz-transform:(firefox)