ThoughtWorks实验室寒假训练第三周总结（CSS3学习总结）

边框

1.圆角
border-radius：指定每个圆角
四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同
2.盒阴影
box-shadow：offset-x阴影的水平偏移量；offset-y阴影的垂直偏移量;blur-radius模糊距离；spread-radius阴影尺寸；颜色。

div{
	box-shadow: 0 10px 20px 10px rgba(0,0,0,0.19), 0 6px 6px 6px rgba(0,0,0,0.23);
}

背景

background-origin：指定背景区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。

多重背景
用逗号隔开的每组值，background-color 只能设置一个。

div{
	background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

文本

1.文本阴影
text-shadow：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

2.文本溢出
text-overflow:ellipsis 显示省略符号来代表被修剪的文本。

字体

1.定义字体

@font-face{
	font-family: myFirstFont;/*定义字体名字*/
    src: url(sansation_light.woff);/*填入字体文件*/
}

2.字体属性

描述符	值	描述
font-stretch	normal,condensed,expanded	定义如何拉伸字体。默认是 “normal”。
font-style	normal,italic,oblique	定义字体的样式。默认是 “normal”。
font-weight	normal,bold,100~900	定义字体的粗细。默认是 “normal”。

3.大小写
text-transform：lowercase全小写 uppercase全大写capitalize首字母大写initial默认样式

2D转换

div{
	-webkit-transform:translate(50px,50px);/*平移*/
					  rotate(30deg);/*顺时针旋转，负值相反*/
					  scale(2,4);/*伸缩*/
					  skew(30deg,20deg);/*翻转*/
}

以上属性均可如此translateX(50px);单独将X，Y轴改变。

3D转换

※坐标系：左手系※

div{
	-webkit-transform:rotateX();/*围绕给定度数的X轴旋转（向屏幕里前后旋转）*/		
					  rotateY();/*围绕给定度数的Y轴旋转（向屏幕里左右旋转）*/
					  rotateZ()/*围绕给定度数的Z轴旋转（在屏幕平面旋转）*/
	}

backface-visibility:hidden/visible;：定义当元素背面向屏幕时是否可见。
perstective：属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。（近大远小）
perspective-origin：规定了镜头在平面上的位置。默认是放在元素的中心。

过渡

1.过渡两项内容

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定时长

2.如何实现
在原块上添加transition: width 2s;来定义过渡属性和时间，并定义新块div:hover来使鼠标悬停后其要展示的过渡后的效果（其他操作同CSS链接）。要添加多个样式的变换效果，添加的属性由逗号分隔。
transition-timing-function属性指定切换效果的速度。
transition-delay属性指定何时将开始切换效果。

动画

@-webkit-keyframes定义动画名字和样式。0%-100%自定时长样式。

@-webkit-keyframes myfirst 
{
    from {background: red;}
    to {background: yellow;}
}

animation：引用动画，并加上时长。
animation-iteration-count：规定动画播放次数infinite无限次播放。
animation-timing-function：指定动画将如何完成一个周期。linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。

多列

-webkit-column-count属性指定了需要分割的列数。（创建多列）
column-gap属性指定了列与列间的间隙。
column-rule 属性
column-rule:1px solid lightblue;
column-rule-width 属性指定了两列的边框厚度:
column-rule-style 属性指定了列与列间的边框样式
column-rule-color属性指定了两列的边框颜色

渐变

线性渐变：属性里用linear-gradient(渐变角度，初始颜色，末尾颜色)0deg是从下到上
repeating-linear-gradient() 函数用于重复线性渐变
贝塞尔曲线：cubic-bezier