css3

一些最重要CSS3模块如下：

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

新边框属性

属性说明 CSS border-image 设置所有边框图像的速记属性。 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-shadow 附加一个或多个下拉框的阴影 3

CSS3 圆角属性

属性描述 border-radius 所有四个边角 border---radius 属性的缩写 border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度

新的背景属性

顺序描述 CSS background-clip 规定背景的绘制区域。 3 background-origin 规定背景图片的定位区域。 3 background-size 规定背景图片的尺寸。 3

渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

新文本属性

属性描述 CSS hanging-punctuation 规定标点字符是否位于线框之外。 3 punctuation-trim 规定是否对标点字符进行修剪。 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3 text-outline 规定文本的轮廓。 3 text-overflow 规定当文本溢出包含元素时发生的事情。 3 text-shadow 向文本添加阴影。 3 text-wrap 规定文本的换行规则。 3 word-break 规定非中日韩文本的换行规则。 3 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

2D转换

新转换属性以下列出了所有的转换属性:

Property 描述 CSS transform 适用于2D或3D转换的元素 3 transform-origin 允许您更改转化元素位置 3

2D 转换方法函数描述 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转换

转换属性

下表列出了所有的转换属性：

属性描述 CSS transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。 3 backface-visibility 定义元素在不面对屏幕时是否可见。 3

3D 转换方法

函数描述 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。
div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}
CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3 animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3 animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

@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;}
}
 
@-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;}
}

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    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;
}

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

CSS3 多列属性

本章节我们将学习以下几个 CSS3 的多列属性:

属性描述 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 的简写属性。

CSS3 多媒体类型

值描述 all 用于所有多媒体类型设备 print 用于打印机 screen 用于电脑屏幕，平板，智能手机等。 speech 用于屏幕阅读器
@media not|only mediatype and (expressions) {
    CSS 代码...;
}

css3

一些最重要CSS3模块如下：

新边框属性

CSS3 圆角属性

新的背景属性

渐变

新文本属性

2D转换

3D转换

过渡属性

CSS3的动画属性

CSS3 多列属性

CSS3 多媒体类型

FEATURED TAGS

FRIENDS