CSS3 模块
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括:
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
- flexbox
- 选择器
CSS3新增伪类举例:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
flexbox:(伸缩布局盒)display:flex|inline-flex;
自动分配容器宽高比例
如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;
可以快速让他们布局在一列;
可以方便让他们对齐容器的左、右、中间等;
无需修改结构就可以改变他们的显示顺序;
如果元素容器设置百分比和视窗大小改变,不用担心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。
选择器:nth-child、属性选择器 还可加入通配符如:^,$,*:[att^=val]表示开始字符时val的att属性、[att$=val]表示结束字符是val的att属性、[att*=val]表示包含至少有一个val的att属性。
css3边框:
通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件:border-radius,border-shadow,border-image;
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。
css3圆角边框
div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ }
css3边框阴影:box-shadow:h-shadow v-shadow blur spread color insert;
div{ box-shadow:10px 10px 5px #999; }
css3边框图片
border-image属性是一个简写属性:设置属性:border-image-source;资源路径
border-image-slice;向内偏移
border-image-width;宽度
border-image-outset;边框图像区域超出边框的量
border-image-repeat;是否适应平铺(repeated),铺满(rounded),拉伸(stretched);
#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; } #stretch { -moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */ -webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */ -o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */ border-image:url(/i/border.png) 30 30 stretch; } #repeat { -moz-border-image:url(/i/border.png) 30 30 repeat; /* Old Firefox */ -webkit-border-image:url(/i/border.png) 30 30 repeat; /* Safari and Chrome */ -o-border-image:url(/i/border.png) 30 30 repeat; /* Opera */ border-image:url(/i/border.png) 30 30 repeat; }
div { border:10px solid transparent; width:40px; padding:5px 10px; -moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */ -webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */ -o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */ border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; }
css3背景:
background-size:
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许在不同的环境中重复使用背景图片。
可以以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
body { background:url(/i/bg_flower.gif); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; padding-top:80px; }
div { background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; }
background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }
CSS3 多重背景图片
CSS3 允许您为元素使用多个背景图像。
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
css3文本效果:
text-shadow:h-shadow v-shadow blur color
h1 {text-shadow:2px 2px 8px #FF0000;}
h1 { color:white; text-shadow:2px 2px 4px #000000; }
h1 { text-shadow:0 0 3px #FF0000; }
word-wrap自动换行:word-wrap: normal|break-word;
p {word-wrap:break-word;}
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
Internet Explorer 9 以及更早的版本,不支持 text-shadow 属性。
hanging-punctuation:规定把标点符号放在文本整行的开头还是结尾的行框之外:hanging-punctuation: none|first|last|allow-end|force-end;
p { hanging-punctuation:first; }
punctuation-trim规定是否对标点字符进行修剪。
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline规定文本的轮廓。
text-overflow规定当文本溢出包含元素时发生的事情。
text-break规定文本的换行规则。
word-break规定非中日韩文本的换行规则。
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。
CSS3 @font-face 规则
可以将自己的字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。“自己的”的字体是在 CSS3 @font-face 规则中定义的。
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
@font-face { font-family: myFirstFont; src: url('/example/css3/Sansation_Light.ttf') ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */ }
@font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }
字体描述符:font-family
src:定义如何拉伸字体normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded
font-stretch:normal | italic | oblique
font-weight:normal | bold | 100-900
unicode-range:unicode-range 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
反射:
.classReflect{ -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); }
2d转换:
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
方法:translate(),rotate(),scale(),skew(),matrix()
//rotate旋转,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。 div{ transform:rotate(30deg); -ms-transform:rotate(30deg);//IE9 -webkit-transform:rotate(30deg);//Safari Chrome -o-transform:rotate(30deg);//Opera -moz-transform:rotate(deg);//FF }
//translate(x,y)方法:移动:从当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数
//translateX(n):
//translateY(n);
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 */ }
//scale(x,y)方法:元素尺寸增加或减少,根据给定的宽度和高度 //scaleX(n);
//scaleY(n);
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 */ }
//skew(x,y)方法:元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数 //skewX(n);
//skewY(n);
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 */ }
//matrix方法:把所有的2D方法组合在一起,需要6个参数,允许旋转缩放移动以及倾斜元素 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 */ }
perspective(n)//定义3D转换元素的透视图
3D旋转:
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持2D转换)。
div { transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -webkit-transform-origin:20% 40%; /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ }
transform-origin属性允许改变被转换元素的位置;必须与transform属性一同使用;
transform-origin:x-axis(left | center | right | length | %) y-axis(top | center | bottom | length | %) z-axis(length)
transform-stye规定被嵌套元素如何在3D空间中显示;
perspective:规定3D元素的透视效果;
perspective-origin:规定3D元素的底部位置
backface-visibility:定义元素在不面对屏幕时是否可见
css3过滤
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本,不支持 transition 属性。
Chrome 25 以及更早的版本,需要前缀 -webkit-。
css3过滤是元素从一种样式逐渐变为另一种的效果:规定所希望把效果添加到哪个css属性上、规定效果时长;
当鼠标移出样式会逐渐变回原来的样式
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:hover { width:300px; }
//向多个样式添加过滤效果时请添加多个属性并用逗号隔开
div { width:100px; height:100px; background:yellow; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ } div:hover { width:200px; height:200px; transform:rotate(180deg); -moz-transform:rotate(180deg); /* Firefox 4 */ -webkit-transform:rotate(180deg); /* Safari and Chrome */ -o-transform:rotate(180deg); /* Opera */ }
transition:简写属性,用于在一个属性中设置四个过渡属性;
transition-property:规定应用过渡的css属性的名称;
transition-duration:定义过渡效果花费的时间,默认为0;
transition-timing-function:规定过渡效果的时间曲线,默认是“ease”;
transition-delay:规定过对效果何时开始;默认为0;
div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and 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 { width:200px; }
//以上代码可以简写为:
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;
}
css3动画:
css3@keyframes规则:在此规则中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果;
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
@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;} }
当在@keyframes中创建动画时需绑定到某个选择器否则不会产生动画效果,至少需要规定动画的名称以及动画时长;
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
改变任意多的样式任意多的次数时 用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。
@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 { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* 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 and 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; }
//以上代码可以简写为:
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;
}
css3多列:
column-count规定元素被分割的列数
column-gap规定列之间的间隔
column-rule设置列之间的宽度,样式,和颜色规则
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本不支持多列属性。
//column-count
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }
//column-gap 配合column-count一起使用
.newspaper { -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2; -moz-column-gap:50px; /* Firefox */ -webkit-column-gap:50px; /* Safari and Chrome */ column-gap:50px; }
//column-rule配合前两种属性一起使用 .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; }
新的属性:
column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性。
多用户界面:
resize:规定可由用户调整元素大小
box-sizing:允许以确切的方式定义适应某个区域的具体内容
outline-offset:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
div { resize:both; overflow:auto; }
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }
轮廓与边框不同:轮廓不占空间,轮廓可能是非矩形
div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; }
appearance 允许您将元素设置为标准用户界面元素的外观,支持:-moz-appearance -webkit-appearance appearance: normal|icon|window|button|menu|field;
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。支持:FF:-moz-box-sizing,其他浏览器都支持 box-sizing: content-box|border-box|inherit;
icon 为创作者提供使用图标化等价物来设置元素样式的能力,支持:没有浏览器支持。icon: auto|URL|inherit
nav-down/up/left/right 规定在使用 arrow-down 导航键时向何处导航,支持:只有Opera支持。 目前只有opera支持 nav-down: auto|id|target-name|inherit;
nav-index 设置元素的 tab 键控制次序。支持:只有Opera支持 nav-index: auto|number|inherit;
outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。outline-offset: length|inherit;
resize 规定是否可由用户对元素的尺寸进行调整。Firefox 4+、Chrome 以及 Safari 不支持 resize。resize: none|both|horizontal|vertical;