CSS3教程

参考：http://www.w3school.com.cn/css3/index.asp

 

前缀：

css3中-moz-、-ms-、-webkit-、-o-

-moz-代表firefox浏览器私有属性
-ms-代表IE浏览器私有属性
-webkit-代表chrome、safari私有属性

-o代表opero私有属性

 

前缀一般加在属性前面，如：-moz-border-radius

—————————————————————————————————————————————————————————————————————————————

 

边框：

border-radius  圆角边框    如：border-radius:500px;

box-shadow   方框阴影     如：box-shadow: 10px 10px 5px #888888;

border-image  边框的原始图片  如：border-image:url(border.png) 30 30 round;    Internet Explorer 不支持 border-image 属性

—————————————————————————————————————————————————————————————————————————————

 

背景：

background-size  调整背景图片的大小  如：background:url(bg_flower.gif);  background-size:63px 100px;

background-origin  属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。如：background-origin:content-box;

 

—————————————————————————————————————————————————————————————————————————————

文本效果：

text-shadow  文本应用阴影  如：text-shadow: 5px 5px 5px #FF0000;

word-wrap  允许对长单词进行拆分，并换行到下一行  如：p {word-wrap:break-word;}

 

属性描述CSShanging-punctuation规定标点字符是否位于线框之外。3punctuation-trim规定是否对标点字符进行修剪。3text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3text-justify规定当  text-align 设置为 "justify" 时所使用的对齐方法。3text-outline规定文本的轮廓。3text-overflow规定当文本溢出包含元素时发生的事情。3text-shadow向文本添加阴影。3text-wrap规定文本的换行规则。3word-break规定非中日韩文本的换行规则。3word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

 

—————————————————————————————————————————————————————————————————————————————

字体：

@font-face

<style>
@font-face
{
font-family: myFirstFont;   //自定义font-family
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

 

—————————————————————————————————————————————————————————————————————————————

2D转换：

translate()   元素从其当前位置移动  如：transform: translate(50px,100px);

rotate()   元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。  如：transform:rotate(30deg);   //transform为改变   deg为度

scale()   如：transform: scale(2,4);    值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew()   翻转  根据给定的水平线（X 轴）和垂直线（Y 轴）参数   如：transform:skew(30deg,20deg);

matrix()   把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

 

 

函数描述matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。translateX(n)定义 2D 转换，沿着 X 轴移动元素。translateY(n)定义 2D 转换，沿着 Y 轴移动元素。scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。scaleX(n)定义 2D 缩放转换，改变元素的宽度。scaleY(n)定义 2D 缩放转换，改变元素的高度。rotate(angle)定义 2D 旋转，在参数中规定角度。skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。skewX(angle)定义 2D 倾斜转换，沿着 X 轴。skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

 

—————————————————————————————————————————————————————————————————————————————

3D转换：

rotateX()   元素围绕其 X 轴以给定的度数进行旋转  如：transform: rotateX(120deg);

rotateY()   元素围绕其 Y 轴以给定的度数进行旋转。如：transform: rotateY(120deg);

 

—————————————————————————————————————————————————————————————————————————————

 

过渡( transition )：http://www.w3school.com.cn/css3/css3_transition.asp  

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

如：transition: width 2s;  应用于宽度属性的过渡效果，时长为 2 秒：

<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 6s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>

 

 

属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。3transition-duration定义过渡效果花费的时间。默认是 0。3transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3transition-delay规定过渡效果何时开始。默认是 0。3

 

—————————————————————————————————————————————————————————————————————————————

 

 

动画（animation）：http://www.w3school.com.cn/css3/css3_animation.asp

CSS3 @keyframes 规则    Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性，Chrome 和 Safari 需要前缀 -webkit-。

如：

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

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：（当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。）

div{animation: myfirst 5s;-moz-animation: myfirst 5s; /* Firefox */-webkit-animation: myfirst 5s; /* Safari 和 Chrome */-o-animation: myfirst 5s;/* Opera */}

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

 

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}

 

 

属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 "ease"。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3animation-fill-mode规定对象动画时间之外的状态。3

 

 

—————————————————————————————————————————————————————————————————————————————

 

多列：通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

column-count  分成多少列

column-gap   列之间的间隔

column-rule

把 div 元素中的文本分隔为三列：

div{-moz-column-count:3; /* Firefox */-webkit-column-count:3;/* Safari 和 Chrome */column-count:3;}

规定列之间 40 像素的间隔：

div{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px;/* Safari 和 Chrome */column-gap:40px;}

 

 

 

属性描述CSScolumn-count规定元素应该被分隔的列数。3column-fill规定如何填充列。3column-gap规定列之间的间隔。3column-rule设置所有 column-rule-* 属性的简写属性。3column-rule-color规定列之间规则的颜色。3column-rule-style规定列之间规则的样式。3column-rule-width规定列之间规则的宽度。3column-span规定元素应该横跨的列数。3column-width规定列的宽度。3columns规定设置 column-width 和 column-count 的简写属性。3

 

 

—————————————————————————————————————————————————————————————————————————————

 

用户界面：在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

resize  属性规定是否可由用户调整元素尺寸

box-sizing  属性允许您以确切的方式定义适应某个区域的具体内容。

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

 

 

—————————————————————————————————————————————————————————————————————————————

 

 

CSS参考手册：

http://www.w3school.com.cn/cssref/index.asp#animation