初学css3

Css3的学习

Css3被划分为模块包括：

1、选择器

2、框模型

3、背景和边框

4、文本效果

5、2D/3D转换

6、动画

7、多列布局

8、用户界面

一：边框效果：

1、圆角边框：写法 border-radius：10px；

2、阴影：写法 box-shadow：10px 10px 5px #888888；

3、边框图片：写法 border-image：url（图片路径）30 30 round；

二：背景图片：

1、设置图片的大小：写法 background-size：30px 30px；

2、设置背景图片的位置：background-origin：border-box（边框与padding之间）

                                        padding-box（内边距中）

                                                              content-box（内容中）

3、多重背景：写法 background-image：url（图片路径），url（图片路径）；

4、Background-clip：规定背景的绘制区域。

三：文本效果：

1、文本阴影：写法 text-shadow：5px 5px 5px #FF0000；

2、自动换行：写法 word-wrap：break-word；

更多请查阅http://www.w3school.com.cn/css3/css3_text_effect.asp

四：2D转换：

1、translate()方法：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：写法 -webkit-transform:translate(50px,100px);//谷歌

                                  -moz-transform:translate(50px,100px);//火狐

位置相对于父级元素。

2、rotate()方法：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

写法：-webkit-transform:rotate(30deg);顺时针旋转30度  谷歌

                     -moz-transform:rotate(30deg);火狐

3、scale()方法：元素的尺寸会增加或减少,即缩放倍数，根据给定的宽度（X 轴）和高度（Y 轴）参数。 写法：-webkit-transform:scale(2,4);谷歌

-moz-transform:scale(2,4);火狐

把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍

4、skew()方法：（扭曲）元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：写法：transform:skew(30deg,20deg);

-moz-transform:skew(30deg,20deg); 火狐

-webkit-transform:skew(30deg,20deg);谷歌

5、matrix() 方法：这个方法就比较强大了，将所有2D转换方法都组合在一起了。它需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

   写法：transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D转换：rotateX（）和rotateY（）元素分别围绕X轴和Y轴旋转。

五：过渡：

          Transition：如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开；

                        例：ransition: width 2s,height 2s, transform 2s;

transition-property      规定应用过渡的 CSS 属性的名称。

transition-duration      定义过渡效果花费的时间。默认是 0

transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"。

transition-delay    规定过渡效果何时开始。默认是 0。

六：动画：

              用@keyframes创建动画，然后规定动画的名称和时间

           写法：@keyframes myfirst{from{background: red;}to {background: yellow;}}

                     或者@keyframes myfirst{50%ckground: red;}100%ckground: yellow;}}

七：多列：

1、创建多列：column-count:3; //创建三列 （根据浏览器的差别而单独设置）

2、列之间的间隔设置：column-gap:40px;  间隔为40像素

更多属性请查阅：http://www.w3school.com.cn/css3/css3_multiple_columns.asp

八：用户界面：

1、resize：写法：resize:both;overflow:auto;用户可自行调整窗口大小

2、box-sizing：能够确切的定义某个区域的具体内容。

3、outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

而轮廓不占用空间，轮廓的形状可能是非矩形。