CSS3,这个新一代的标准应运而生。为了满足现有的对于Web UI 的开发需求,它提供了一系列强大的功能,如许多新的CSS 属性(文字,布局,颜色等等),各种CSS 特效,甚至还支持CSS 动画、元素的变换。

CSS3 布局

resize

在 CSS3中resize 属性设置是否可由用户调整元素尺寸。

/* 设置div可以由用户调整大小 */
div{
resize: both;
overflow: auto;
}

box-sizing

box-sizing 属性用来改变默认的 CSS 盒模型 对元素高宽的计算方式。box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。例如,假如您需要并排放置两个带边框的框,可通过将box-sizing设置为”border-box”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

/* 规定两个并排的带边框方框 */
div{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

  • content-box 默认值,标准盒模型。 width 与 height 只包括内容的宽和高, 不包括边框,内边距,外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
  • padding-box width 与 height 包括内边距,不包括边框与外边距。
  • border-box width 与 height 包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

outline-offset

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同:轮廓不占用空间,轮廓可能是非矩形;

/* 规定边框边缘之外 15 像素处的轮廓 */
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

flexBox

详细内容:CSS之flex布局

CSS3 2d转换 transform

详细:CSS之动画使用

通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,转换是使元素改变形状、尺寸和位置的一种效果。

translate() 方法

通过 translate(x , y) 方法,元素根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数从其当前位置移动,x为正值向右移动,为负值向左移动;y为正值向下移动,为负值向上移动;

div{
transform: translate(50px,100px); /* 向右平移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 */
}

rotate() 方法

控制元素顺时针旋转给定的角度。为正值,元素将顺时针旋转。为负值,元素将逆时针旋转。

div{
transform: rotate(30deg); /* 顺时针旋转30度 */
-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 轴)参数(倍数),控制元素的尺寸的增加、减少。

div{
transform: 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 */
}

skew() 方法

根据给定的水平线(X 轴)和垂直线(Y 轴)参数设置元素偏移给定的角度。

/* 设置围绕 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 */
}

matrix() 方法

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

/* 使用 matrix 方法将 div 元素旋转 30 度 */
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转换

CSS3 允许使用 3D 转换来对元素进行格式化

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 */
}

CSS3 过渡 transition

通过CSS3可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。通过设置添加过渡效果的CSS属性和设置过渡效果的时长实现

语法:transition : transition-property | transition-duration | transition-timing-function | transition-delay;

  • transition-property 规定应用过渡的 CSS 属性的名称。
  • transition-duration 定义过渡效果花费的时间。默认是 0。
  • transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
  • transition-delay 规定过渡效果何时开始。默认是 0。
/* 设置在宽度上添加过渡效果,时长为2秒,过渡效果时间曲线为linear,等待1秒后开始过渡 */
div{
transition: width 2s linear 1s;
-moz-transition: width 2s linear 1s; /* Firefox 4 */
-webkit-transition: width 2s linear 1s; /* Safari and Chrome */
-o-transition: width 2s linear 1s; /* Opera */
}

CSS3 动画

通过 CSS3可以创建动画,这些动画可以取代网页中的画图片、Flash 动画以及 JavaScript。CSS3 中通过@keyframes 规则来创建动画。在 @keyframes 中规定某项CSS样式,就能创建由当前样式(动画开始前的样式)逐渐改为新样式(需要变到的样式)的动画效果。

通过from , to关键字设置动画发生的时间

/* 通过@keyframes 创建动画 */
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
/* Firefox */
@-moz-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Opera */
@-o-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

/*
将创建的动画绑定到选择器,并至少指定以下两项 CSS3 动画属性
1.指定动画的名称;
2.指定动画的时长;
*/
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

通过百分比设置动画发生的时间

/* 当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变 */
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

/* 同时改变背景色和位置 */
@keyframes myfirst{
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;}
}

语法: animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

  • 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 规定对象动画时间之外的状态。

CSS3 文本

@Font-face 特性

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

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

div {
font-family:myFirstFont;
}

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。IE 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。

Word-wrap & Text-overflow 样式

word-wrap 属性允许长单词或URL地址被拆分,换行到下一行。

p {
word-wrap: break-word;
}

text-overflow 属性规定当文本溢出包含元素时发生的事情,
需要跟 white-space: nowrap;一起使用

div {
text-overflow: ellipsis;
}
/* clip/修剪文本,ellipsis/显示省略符号来代表被修剪的文本,string/使用给定的字符串来代表被修剪的文本。 */

text-shadow 属性

给为本添加阴影,能够设置水平阴影、垂直阴影、模糊距离,以及阴影的颜色。

h1{
text-shadow: 5px 5px 5px #FF0000;
/* text-shadow: 水平位置 垂直位置 [模糊距离] [颜色] */
}

Text-decoration 文本修饰

h1 {text-decoration: overline}         /* 上划线 */
h2 {text-decoration: line-through} /* 中划线 */
h3 {text-decoration: underline} /* 下划线 */
h4 {text-decoration: blink} /* 定义闪烁的文本。 */
a {text-decoration: none} /* 没有线 */

column-count 文本多列布局

通过 CSS3够创建多个列来对文本进行布局,就像我们经常看到的报纸的布局一样。

column-count 属性规定元素应该被分隔的列数,column-gap 属性规定列之间的间隔,column-rule 属性设置列之间的宽度、样式和颜色规则。

/* 将div中的文本分为3列 */
div{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
}
/* 设置列之间的间隔为 40 像素 */
div{
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
}
/* column-rule : column-rule-width | column-rule-style | column-rule-color */
div{
column-rule:3px outset #ff0000;
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
}

CSS3 边框

border-radius 圆角边框

在CSS2中添加圆角很棘手,我们不得不在每个角落使用不同的图像。但是在CSS3中通过添加一个属性就可以搞定,那就是border-radius

语法: border-radius : length length;

第一个值设置其水平半径,第二个值设置其垂直半径,如果第二个值省略则默认第二个值等于第一个值。

border-radius 是4个角的缩写方法。四个角的表示顺序与border类似按照border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的顺序来设置:

div{
border: 1px solid;
/* 如果 / 前后的值都存在,那么 / 前面的值设置其水平半径,/ 后面值设置其垂直半径,如果没有 / ,则水平和垂直半径相等 */
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;

/* 上面写法等价于下面的写法,第一个值是水平半径,第二个值是垂直半径 */
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}

box-shadow 边框阴影

通过属性box-shadow 向边框添加阴影。

box-shadow : [inset] x-offset y-offset blur-radius [spread-radius] color

对象选择器: { box-shadow: [投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影颜色 }

div{
/* 内阴影,向右偏移10px,向下偏移10px,模糊半径5px,阴影缩小10px */
box-shadow: inset 10px 10px 5px -10px #888888;
}

border-image 边框图片

语法:border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat

div{
border-image:url(border.png) 30 30 round;

border-image: url(border.png) 20/10px repeat;
}

CSS3 背景

background-size 属性

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以设置背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。可以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

div{
background:url(bg_flower.gif);
/* 通过像素规定尺寸 */
background-size:63px 100px;

/* 通过百分比规定尺寸 */
background-size:100% 50%;
background-repeat:no-repeat;
}

background-origin 属性

规定背景图片的定位区域,背景图片可以放置于content-box、padding-box 或 border-box 区域,

div{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
/* 规定背景图片的定位区域 */
background-origin:content-box;
}

区域的具体划分如下:

background-clip 属性

与background-origin 属性相似,规定背景颜色的绘制区域,区域划分与background-origin 属性相同。

div{
background-color:yellow;
background-clip:content-box;
}

多重背景图片

CSS3 允许为元素设置多个背景图像

body{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

渐变效果

浏览器支持两种类型的渐变:线性渐变 (linear),通过 linear-gradient 函数定义,以及 径向渐变 (radial),通过 radial-gradient 函数定义.

body {
background: -webkit-linear-gradient(left,#ace,#f96); /* 线性渐变 */
background: -webkit-radial-gradient(#ace, #f96, #1E90FF); /* 径向渐变 */
}

转载请标注原文地址