CSS3 边框
属性 |
说明 |
|
设置所有边框图像的速记属性。 |
|
一个用于设置所有四个边框- *-半径属性的速记属性 |
|
附加一个或多个下拉框的阴影 |
CSS3 圆角属性
属性 |
描述 |
|
所有四个边角 border---radius 属性的缩写 |
|
定义了左上角的弧度 |
|
定义了右上角的弧度 |
|
定义了右下角的弧度 |
|
定义了左下角的弧度 |
新的背景属性
顺序 |
描述 |
|
规定背景的绘制区域。 |
|
规定背景图片的定位区域。 |
|
规定背景图片的尺寸。 |
新文本属性
属性 |
描述 |
|
规定标点字符是否位于线框之外。 |
|
规定是否对标点字符进行修剪。 |
|
设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
|
向元素的文本应用重点标记以及重点标记的前景色。 |
|
规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
|
规定文本的轮廓。 |
|
规定当文本溢出包含元素时发生的事情。 |
|
向文本添加阴影。 |
|
规定文本的换行规则。 |
|
规定非中日韩文本的换行规则。 |
|
允许对长的不可分割的单词进行分割并换行到下一行。 |
新转换属性
以下列出了所有的转换属性:
Property |
描述 |
|
适用于2D或3D转换的元素 |
|
允许您更改转化元素位置 |
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 轴。 |
转换属性
下表列出了所有的转换属性:
属性 |
描述 |
|
向元素应用 2D 或 3D 转换。 |
|
允许你改变被转换元素的位置。 |
|
规定被嵌套元素如何在 3D 空间中显示。 |
|
规定 3D 元素的透视效果。 |
|
规定 3D 元素的底部位置。 |
|
定义元素在不面对屏幕时是否可见。 |
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 属性的名称。 |
|
定义过渡效果花费的时间。默认是 0。 |
|
规定过渡效果的时间曲线。默认是 "ease"。 |
|
规定过渡效果何时开始。默认是 0。 |
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性:
属性 |
描述 |
|
规定动画。 |
|
所有动画属性的简写属性,除了 animation-play-state 属性。 |
|
规定 @keyframes 动画的名称。 |
|
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
|
规定动画的速度曲线。默认是 "ease"。 |
|
规定动画何时开始。默认是 0。 |
|
规定动画被播放的次数。默认是 1。 |
|
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
|
规定动画是否正在运行或暂停。默认是 "running"。 |
CSS3 多列属性
下表列出了所有 CSS3 的多列属性:
属性 |
描述 |
|
指定元素应该被分割的列数。 |
|
指定如何填充列 |
|
指定列与列之间的间隙 |
|
所有 column-rule-* 属性的简写 |
|
指定两列间边框的颜色 |
|
指定两列间边框的样式 |
|
指定两列间边框的厚度 |
|
指定元素要跨越多少列 |
|
指定列的宽度 |
|
设置 column-width 和 column-count 的简写 |
新的用户界面特性
属性 |
说明 |
CSS |
|
允许您使一个元素的外观像一个标准的用户界面元素 |
3 |
|
允许你以适应区域而用某种方式定义某些元素 |
3 |
|
为创作者提供了将元素设置为图标等价物的能力。 |
3 |
|
指定在何处使用箭头向下导航键时进行导航 |
3 |
|
指定一个元素的Tab的顺序 |
3 |
|
指定在何处使用左侧的箭头导航键进行导航 |
3 |
|
指定在何处使用右侧的箭头导航键进行导航 |
3 |
|
指定在何处使用箭头向上导航键时进行导航 |
3 |
|
外轮廓修饰并绘制超出边框的边缘 |
3 |
|
指定一个元素是否是由用户调整大小 |
3 |
CSS3 弹性盒子属性
下表列出了在弹性盒子中常用到的属性:
属性 |
描述 |
|
指定 HTML 元素盒子类型。 |
|
指定了弹性容器中子元素的排列方式 |
|
设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
|
设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
|
设置弹性盒子的子元素超出父容器时是否换行。 |
|
修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
|
flex-direction 和 flex-wrap 的简写 |
|
设置弹性盒子的子元素排列顺序。 |
|
在弹性子元素上使用。覆盖容器的 align-items 属性。 |
|
设置弹性盒子的子元素如何分配空间。 |
值 |
描述 |
all |
用于所有多媒体类型设备 |
print |
用于打印机 |
screen |
用于电脑屏幕,平板,智能手机等。 |
speech |
用于屏幕阅读器 |
CSS3 多媒体类型
值 |
描述 |
all |
用于所有多媒体类型设备 |
print |
用于打印机 |
screen |
用于电脑屏幕,平板,智能手机等。 |
speech |
用于屏幕阅读器 |