Css3

一、文字属性以及字体图标

1、盒子阴影

box-shadow:属性向框添加一个或多个阴影。

语法：box-shadow:h-shadow v-shadowblur spread;

h-shadow:阴影水平偏移值（可取正负值）；

v-shadow：阴影垂直偏移值（可取正负值）；

blur：模糊的距离；

spread：阴影尺寸；

color：阴影颜色；

inset：将外部阴影（outset）改为内部阴影。

2、文字阴影

text-shadow属性向文本设置阴影。

语法：text-shadow: h-shadowv-shadow blur color;

h-shadow：阴影水平偏移值（可取正负值）；

v-shadow：阴影垂直偏移值（可取正负值）；

blur：模糊的距离

color:阴影颜色

3、文字换行

white-space属性设置如何处理元素内的空白。

语法：white-space:nowrap;不换行

white-space:pre-wrap;换行

word-wrap属性允许长单词或URL地址换行到下一行。

语法：word-wrap: normal;只在允许的断字点换行（浏览器默认处理）

word-wrap:break-word;在长单词或URL地址内部进行换行

word-break属性规定自动换行的处理方法。

语法：word-break: normal;使用浏览器默认的换行规则

word-break:break-all;允许在单词内

word-break:keep-all;只能在半角空格或连字符处换行

4、单行显示剩余用省略号代替

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

5、@font-face规则

含义：规范浏览器的字体的规则

注意：nternet Explorer 8以及更早的版本不支持新的@font-face规则。

语法：

font-family：必需。规定字体的名称。

src：必需。定义字体文件的URL。

@font-face

{

font-family: myFirstFont;

src:url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */

}

div { font-family:myFirstFont; }

二、CSS3中变形与动画（上）

1、认识变形-transform

变形-旋转rotate

语法：transform:rotate(100deg);

变形-缩放scale

语法：transform:scale(number);

默认情况下X轴方向和Y轴方向同时缩放

transform: scaleX(number);

transform: scaleY(number);

变形-倾斜skew

语法：transform:skew(100deg);

变形-位移translate

语法：transform:translate(x,y);

变形-原点transform-origin

语法：transform-origin：x% x%

2、transition

概述：过渡动画特效

语法：transition：属性名

例：

transition-property：width；

transition-delay:2s;规定过渡何时开始

transition-duration: 2s;持续时间

解释：将元素的宽属性形成2秒的过渡特效

三、CSS3中变形与动画（下）

1、定义动画Keyframes

概述：通过@keyframes规则，您能够创建动画。

以百分比来规定改变发生的时间，或者通过关键词“from”和"to"，等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。

语法：@keyframes animationname{

keyframes-selector{css-styles;}

}

参数：animationname：定义动画的名称

keyframes-selector：动画时长的百分比。

from（与0%相同）

to(与100%相同)

ss-styles：一个或多个合法的CSS样式属性

2、动画的播放方式

播放次数角度：

infinite：无限次数播放(不加此属性只播放一次)

播放速度角度:

animation-timing-function规定动画的速度曲线

语法：animation-timing-function:linear动画从头到尾的速度是相同的。

ease默认。动画以低速开始，然后加快，在结束前变慢。

ease-in动画以低速开始。

ease-out动画以低速结束。

ease-in-out动画以低速开始和结束

cubic-bezier(x1,y1,x2,y2)在cubic-bezier函数中自己的值。可能的值是从0到1的数值。

3、设置动画播放时间

animation-delay属性定义动画何时开始。

语法：animation-delay: time;

animation-duration属性定义动画完成一个周期所需要的时间，以秒或毫秒计

语法：animation-duration: time;

4、设置动画播放方向

animation-direction属性定义是否应该轮流反向播放动画。

语法：animation-direction:normal：默认值动画正常播放

alternate：让动画轮流反向播放

5、设置动画播放次数

animation-iteration-count属性定义动画的播放次数。

语法：animation-iteration-count:n :定义动画的播放次数

infinite :定义动画无限播放

6、动画时间外属性

animation-fill-mode属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

语法：animation-fill-mode: none :默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

forwards :在动画结束后（由animation-iteration-count决定），动画体被锁定的位置在结束的位置

backwards：在动画结束后（由animation-iteration-count决定），动画体被锁定的位置在开始的位置

both：向前或向后填充

过度动画和关键帧动画的区别：

过度动画相对于关键帧动画，我们只关注第一帧和最后一帧的状态

而关键帧动画我们可以操控他全部过程中的每一帧

四、多列布局与css3的用户界面

1、Columns列属性

定义：columns属性是一个简写属性，用于设置列宽和列数

语法：columns:column-width column-count;

属性值：

column-width：列宽

column-count：列数

2、column-gap设置并列间的间隔单位是px

3、column-rule设置并列间间隔的表框以及边框的样式

4、跨列设置

column-span属性规定元素应横跨多少列

语法：column-span:1表示只能跨一列

all跨所有列

5、自由缩放

resize规定可以由用户调整div元素的大小

语法：resize:none：默认值用户无法调整元素的尺寸。

both：用户可调整元素的高度和宽度。

horizontal :用户可调整元素的宽度

vertical :用户可调整元素的高度。

6、overflow

属性规定当内容溢出元素框时发生的事情

语法：overflow:scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

visible：默认值。内容不会被修剪，会呈现在元素框之外

hidden:内容会被修剪，并且其余内容是不可见的。

auto :如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit：规定应该从父元素继承overflow属性的值。

7、CSS3外轮廓属性

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

外轮廓宽度outline-width

外轮廓样式outline-style

外轮廓颜色outline-color

外轮廓扩展outline-offse

语法:outline-offset: Length：　轮廓与边框边缘的距离。

Inherit：规定应从父元素继承outline-offset属性的值

五、CSS3背景与边框

1、新增属性

background-clip

定义：background-clip属性规定背景的绘制区域。

语法：background-clipborder-box背景被裁剪到边框盒。

padding-box背景被裁剪到内边距框

content-box背景被裁剪到内容框

background-origin

定义：background-origin属性规定background-position属性相对于什么位置来定位。

语法:background-origin:border-box背景图像相对于边框盒来定位

padding-box背景图像相对于内边距框来定位。

content-box背景图像相对于内容框来定位

background-size

定义：规定背景图像的尺寸

语法:background-size:length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"。

percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"。

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

2、概述：css3中规定了一个元素可以显示多个背景图像，这就是一个新的规定。

3、圆角和边框border-radius

border-radius

定义：属性是一个简写属性，用于设置四个border-*-radius属性该属性允许您为元素添加圆角边框！

语法：border-radius: px|% px|%;

4、使用图像边框border-image

border-image

定义：border-image属性是一个简写属性，用于设置以下属性

border-image-source用在边框的图片的路径。

border-image-slice图片边框向内偏移

border-image-width图片边框的宽度。

border-image-outset边框图像区域超出边框的量。

border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。