CSS3学习笔记

写在前面：主要是按照http://jsrun.net/t/niKKp这个教程学习，并自己摸索，添加进一点学习注释，也以便后续自己复习使用。

CSS3 边框

border-radius

div
{
border:2px solid;/* 2px表示宽度 */
border-radius:25px;/* 25px表示圆角弧度 */
-moz-border-radius:25px; /* Old Firefox */
}

box-shadow

div
{
box-shadow: 10px 10px 5px #888888;
/* 第一个10px表示阴影右偏移，第二个10px表示阴影下偏移，第三个5px表示阴影后偏移（理解成越往后，阴影越模糊）最后#888888表示阴影颜色 */
}

border-image

#round
{
/* 以round为例 */
-moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
border-image:url(/i/border.png) 30 30 round; /* 图片url，后面两个我理解成边界图片取多宽和多高，round和stretch为两种边界风格，理解成一个循环一个拉伸 */
}

另外这里有一个div中写成了这样：

border:15px solid transparent;
/* transparent属性用来指定全透明色彩 */

CSS3 背景

back-groundsize

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
/* background-size:25% 100%; 占这个div的比例 */
background-repeat:no-repeat;/* 注释掉整个背景反复排列这个size的图片 */
}

background-origin

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

{
background-origin:border-box;
background-origin:padding-box;
background-origin:context-box;
/* 理解成在哪个box放 */
}

background-clip

规定背景的绘制区域。

div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}

CSS3 文本效果

text-shadow

h1
{
text-shadow: 5px -6px 3px #FF0000;
/* 对h1标签的效果，5px为阴影右偏移，-6px为阴影下偏移，这里显示为上偏移6px，3px为后偏移，#为颜色代码  */
}

word-wrap

单词太长的话就可能无法超出某个区域：
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

p 
{
word-wrap:break-word;
}
/* 对p标签效果 */

text-overflow

text-overflow 属性规定当文本溢出包含元素时发生的事情。

div.test/* #表示id，.表示class */
{
text-overflow:clip;/* 修剪文本 */
text-overflow:ellipsis;/* 显示省略符号来代表被修剪的文本 */
}

word-break

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

p.test 
{
word-break:keep-all;/* 不分割单词，任其溢出，单词结束再换行 */
word-break:break-all;/* 分割单词 */
}

hanging-punctuation、text-align-last

p
{
hanging-punctuation:first;/* 在p元素首行的开始边缘之外放置一个标点符号 */
text-align-last: right;/* 把段落的最后一行向右对齐 针对 Firefox 的代码-moz-   只有Internet Explorer 支持 text-align-last 属性。*/
}

CSS3 字体

font-face

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

CSS3 2D转换

rotate() 方法

div
{
transform: rotate(30deg);/* 该div顺时针旋转30度 */
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

div
{
transform: translate(50px,100px);/* 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素 */
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
/* 注意一点是，这只是div的移动，也就是说如果两个div上下排列，移动50px 100px和100px 100px不是并排，而仍然是上下排列*/
/* translateX(n) 定义 2D 转换，沿着 X 轴移动元素 */
}

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

div
{
transform: scale(2,4);/* 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 */
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
/* scaleX(n)	定义 2D 缩放转换，改变元素的宽度 */
}

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

div
{
transform: skew(30deg,20deg);/* 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度 */
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
/* skewX(angle)	定义 2D 倾斜转换，沿着 X 轴 */
}

matrix() 方法

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

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

CSS3 3D转换

rotate() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转，同理Y不再列举

div
{
transform: rotateX(120deg);/* 与2D对比差距 */
-webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);    /* Firefox */
}

CSS3 过渡

transition属性

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;/* 变化那个属性 */
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
/* 在一个例子中使用所有过渡属性： */
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* 上面四行等同于transition: width 1s linear 2s; */
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{/* hover为触发条件 */
width:300px;/* width变化到多大 */
}

CSS3 动画

@keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

CSS3 过渡

transition属性

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
/* 0% 是动画的开始，100% 是动画的完成。当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：*/
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
div
{/* 运行名为 myfirst 的动画，其中设置了所有动画属性 */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* 等同于：animation: myfirst 5s linear 2s infinite alternate; */
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

CSS3 多列

column-count

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
/*
<div class="newspaper">文本（按照宽度自动分列）</div> */

column-gap

.newpaper
{
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}

column-rule

.newpaper
{
-moz-column-rule:4px outset #000000; /* Firefox */
-webkit-column-rule:4px outset #000000; /* Safari and Chrome */
column-rule:4px outset #000000;
/* 有意思的是，我调试Chrome起作用的最后一行*/
/* 4px分列线宽，outset展示，#颜色 */
}

CSS3 用户界面

resize

规定 div 元素可由用户调整大小，简单来说，用户可以拖拉变大变小这个div

div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
/* resize 属性还有：
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。*/
overflow:auto;
}

box-sizing

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

div.container
{
width:30em;
border:1em solid;/* 简单理解：1em=16px */
}
div
{/* 规定两个并排的带边框方框 */
box-sizing:border-box;
-moz-box-sizing:border-box;    /* Firefox */
-webkit-box-sizing:border-box;    /* Safari */
width:50%;
float:left;
}

然后在html中调用：

<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>

outline-offset

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

轮廓与边框有两点不同：

轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。

div
{
margin:20px;
width:150px; 
padding:10px;/* 核心还是盒子模型 */
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
} 

CSS3 参考手册

有更多的属性查询，这里给出一个链接：http://jsrun.net/t/4iKKp
网上还有更多的属性查询链接，比如w3c等。

CSS3 其余部分

CSS3还有很多别的属性，教程里也给出颜色，单位等，这里不赘述。