CSS3

CSS3

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

 

CSS3 被划分为模块。

其中重要的 CSS3 模块包括：

• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

CSS3 中，border-radius 属性用于创建圆角；

向 div 元素添加圆角：

示例：

  div

{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
｝

CSS3 中，border-radius 属性用于创建圆角；

示例：

向 div 元素添加方框阴影：

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 中，text-shadow 可向文本应用阴影；
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色： 
示例：
h1 { text-shadow: 5px 5px 5px #FF0000; } 
CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：
示例：
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}

2D Transform 转换
 
函数
 
描述
 
 
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 Transform 转换
 
函数
 
描述
 
 
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
 
定义 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 转换元素的透视视图。
 
过渡属性
 
属性
 
描述
 
CSS
 
 
transition
 
简写属性，用于在一个属性中设置四个过渡属性。
 
3
 
 
transition-property
 
规定应用过渡的 CSS 属性的名称。
 
3
 
 
transition-duration
 
定义过渡效果花费的时间。默认是 0。
 
3
 
 
transition-timing-function
 
规定过渡效果的时间曲线。默认是 "ease"。
 
3
 
 
transition-delay
 
规定过渡效果何时开始。默认是 0。
 
3