接上 关于CSS
http://www.jianshu.com/p/01d228219d59
学习CSS3的最佳网站没有之一 http://www.w3school.com.cn/css3/index.asp
CSS3 被划分为模块。其中最重要的 CSS3 模块包括:
选择器,框模型,背景和边框,文本效果,2D/3D 转换,动画,多列布局,用户界面
边框:
兼容性:
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。
创建圆角边框(border-radius,是设置所有四个 border-*-radius 属性的简写属性。)
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
向矩形添加阴影(box-shadow),
box-shadow: 10px 10px 5px #888888;
使用图片来绘制边框(border-image,是设置所有 border-image-* 属性的简写属性。)
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
背景:
兼容性:
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
规定背景图片的尺寸(background-size)
div {
/*background:url(bg_flower.gif) no-repeat;*/
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
}
规定背景图片的定位区域(background-origin)
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
/*background:url(bg_flower.gif) no-repeat;*/
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
多重背景图片(可以为元素使用多个背景图像)
body {
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
规定背景的绘制区域(background-clip)
兼容性
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
可取值
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
div {
background-color:yellow;
background-clip:content-box;
}
文本效果:
兼容性
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
文本阴影(text-shadow):
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
自动换行 / 对长的不可分割的单词进行分割并换行到下一行(word-wrap):
值可以是normal,break-word(在长单词或 URL 地址内部进行换行)。
p {word-wrap:break-word;}
更多:
规定非中日韩文本的换行规则(word-break):
所有主流浏览器都支持 word-break 属性。
值可以是normal,break-all(允许在单词内换行),keep-all(只能在半角空格或连字符处换行)
p{word-break: normal;}
当文本溢出包含元素时发生的事情(text-overflow):
所有主流浏览器都支持 text-overflow 属性。
值可以是clip(修剪文本),ellipsis(显示省略符号来代表被修剪的文本。),string(使用给定的字符串来代表被修剪的文本。)
例子:http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow_hover
当 text-align 设置为 "justify" 时所使用的对齐方法(text-justify):
只有 Internet Explorer 支持 text-justify 属性。
值可以是:auto,none(禁用齐行),inter-word(增加/减少单词间的间隔),inter-ideograph(用表意文本来排齐内容),inter-cluster(只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐),distribute(类似报纸版面,除了在东亚语系中最后一行是不齐行的),kashida(通过拉伸字符来排齐内容)。
标点字符是否位于线框之外(hanging-punctuation)
目前主流浏览器都不支持 hanging-punctuation 属性。
值可以是:none(不在文本整行的开头还是结尾的行框之外放置标签符号),first(标点附着在首行开始边缘之外),last(标点附着在首行结尾边缘之外),allow-end,force-end
文本轮廓(text-outline):
所有主流浏览器都不支持 text-outline 属性。
值:thickness(必需。轮廓的粗细),blur(可选。轮廓的模糊半径),color(必需。轮廓的颜色)
text-outline: thickness blur color;
文本的换行(折行)规则(text-wrap):
目前主流浏览器都不支持 text-wrap 属性。
值可以是:normal,none (不换行),unrestricted (在任意两个字符间换行),suppress(压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。)
p{text-wrap: normal;}
text-emphasis是简写属性,用于设置 text-emphasis-style 和 text-emphasis-color。
目前主流浏览器都不支持 text-emphasis 属性。
text-emphasis-style 向元素的文本应用重点标记。
text-emphasis-color 定义重点标记的前景色。
如果标点位于行开头或结尾处,或者临近另一个全角标点符号,是否对标点符号进行修剪。(punctuation-trim)
目前主流浏览器都不支持 punctuation-trim 属性。
值可以是:none,start(修剪每行结尾的开启标点符号),end(修剪每行结尾的闭合标点符号),allow-end,adjacent
设置如何对齐最后一行或紧挨着强制换行符之前的行(text-align-last)???
字体:
当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
@font-face 规则
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
您必须为粗体文本添加另一个包含描述符的 @font-face:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
文件 "Sansation_Bold.ttf" 是另一个字体文件,它包含了 Sansation 字体的粗体字符。
只要 font-family 为 "myFirstFont" 的文本需要显示为粗体,浏览器就会使用该字体。
通过这种方式,我们可以为相同的字体设置许多 @font-face 规则。
除了font-family,src必须的描述符外,更多字体描述符:
font-stretch(定义如何拉伸字体),font-style(定义字体的样式),font-weight(定义字体的粗细),unicode-range(定义字体支持的UNICODE字符范围)
http://www.w3school.com.cn/css3/css3_font.asp
2D 转换:对元素进行移动、缩放、转动、拉长或拉伸。
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
transform属性:向元素应用 2D 或 3D 转换。
transform-origin属性:允许你改变被转换元素的位置。
translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
div {
transform: translate(50px,100px);
-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 */
}
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
rotate(30deg) 把元素顺时针旋转 30 度。
div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
div {
transform: scale(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 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
skew():元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
div {
transform: skew(30deg,20deg);
-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 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
matrix():把所有 2D 转换方法组合在一起。需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
将 div 元素旋转 30 度:http://www.w3school.com.cn/tiy/t.asp?f=css3_transform_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 */
}
3D转换:
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
rotateX():元素围绕其 X 轴以给定的度数进行旋转。
div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY():元素围绕其 Y 轴以给定的度数进行旋转。
div {
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
|转换属性|are|
|------|--------|----|
|transform|向元素应用 2D 或 3D 转换。|
|transform-origin|允许你改变被转换元素的位置。|
|transform-style|规定被嵌套元素如何在 3D 空间中显示。|
|perspective|规定 3D 元素的透视效果。|
|perspective-origin|规定 3D 元素的底部位置。|
|backface-visibility|定义元素在不面对屏幕时是否可见。|
2D Transform 方法 | are |
---|---|
matrix3d() | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
过渡:当元素从一种样式变换为另一种样式时为元素添加效果。
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。
值:规定您希望把效果添加到哪个 CSS 属性上;规定效果的时长;
注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。
例子:应用于宽度属性的过渡效果,时长为 2 秒:
div {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover { width:300px; } /*当指针移出元素时,它会逐渐变回原来的样式。*/
多项改变,添加多个属性,由逗号隔开:
例子:向宽度、高度和转换添加过渡效果:
div {
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
过渡属性 | are |
---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property | 规定应用过渡的 CSS 属性的名称。 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
div {
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
动画:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
@keyframes 规则用于创建动画。
两个值:规定动画的名称;规定动画的时长
您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
创建动画时,需要把它捆绑到某个选择器,否则不会产生动画效果。
用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst { /* Firefox */
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst { /* Safari 和 Chrome */
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst { /* Opera */
from {background: red;}
to {background: yellow;}
}
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
动画属性 | are |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-fill-mode | 规定对象动画时间之外的状态。 |
div {
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
多列
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本不支持多列属性。
元素应该被分隔的列数(column-count)
例子:把 div 元素中的文本分隔为三列:
div {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
列之间的间隔(column-gap)
例子:规定列之间 40 像素的间隔:
div {
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
设置列之间的宽度、样式和颜色规则(column-rule)是column-rule-color,column-rule-style ,column-rule-width的简写属性。
div {
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
元素应横跨多少列(column-span)
Internet Explorer 10 和 Opera 支持 column-span 属性。
Safari 和 Chrome 支持替代的 -webkit-column-span 属性。
注释:Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。
值可以是1,all
列的宽度(column-width)
Internet Explorer 10 和 Opera 支持 column-width 属性。
Firefox 支持替代的 -moz-column-width 属性。
Safari 和 Chrome 支持替代的 -webkit-column-width 属性。
注释:Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。
值可以是auto,长度值。
规定列的宽度和列数(columns),是column-width和column-count的简写属性。
Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
注释:Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
如何填充列(column-fill)
主流浏览器都不支持 column-fill 属性。
值可以是balance,auto
用户界面:特性包括重设元素尺寸、盒尺寸以及轮廓等。
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
是否可由用户调整元素尺寸(resize)
例子:规定 div 元素可由用户调整大小:
div {
resize:both;
overflow:auto;
}
以确切的方式定义适应某个区域的具体内容(box-sizing)
例子:规定两个并排的带边框方框:
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓(outline-offset)
轮廓与边框有两点不同:轮廓不占用空间;轮廓可能是非矩形
例子:规定边框边缘之外 15 像素处的轮廓:
div {
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
appearance 允许您将元素设置为标准用户界面元素的外观
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
值可以是normal,icon,window,button,menu,field
例子:使 div 元素看上去像一个按钮:
div {
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
icon 为创作者提供使用图标化等价物来设置元素样式的能力。
目前没有浏览器支持 icon 属性。
值可以是auto,url()
例子:将图像元素设置为图标化的等价物:
img {
content:icon;
icon:url(imgicon.png);
}
nav-down 规定在使用 arrow-down 导航键时向何处导航。
目前只有 Opera 支持 nav-down 属性。
值可以是auto,id(被导航元素的id),target-name(被导航的目标框架),
button#b1 {
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2 {
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3 {
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4 {
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}
nav-index 设置元素的 tab 键控制次序。
目前只有 Opera 支持 nav-index 属性。
值可以是auto,number(指示元素的导航键控制次序。1 代表第一个。)
nav-left 规定在使用 arrow-left 导航键时向何处导航。
目前只有 Opera 支持 nav-left 属性。
值可以是auto,id(被导航元素的id),target-name(被导航的目标框架),
nav-right 规定在使用 arrow-right 导航键时向何处导航。
目前只有 Opera 支持 nav-right 属性。
值可以是auto,id(被导航元素的id),target-name(被导航的目标框架),
nav-up 规定在使用 arrow-up 导航键时向何处导航。
目前只有 Opera 支持 nav-up 属性。
值可以是auto,id(被导航元素的id),target-name(被导航的目标框架),