CSS中的所有属性的详细介绍

本篇内容介绍了“CSS中的所有属性的详细介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

CSS align-content 属性

默认值：stretch

继承：否

可动画化：否

版本：CSS3

JavaScript 语法：object.style.alignContent="center"

定义和用法：

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

语法：align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

align-content的属性值：

值                        描述

stretch                默认值。项目被拉伸以适应容器。

center                项目位于容器的中心。

flex-start            项目位于容器的开头。

flex-end            项目位于容器的结尾。

space-between项目位于各行之间留有空白的容器内。

space-around    项目位于各行之前、之间、之后都留有空白的容器内。

initial                设置该属性为它的默认值。

inherit              从父元素继承该属性。

。。。。。。

CSS align-items 属性

默认值：stretch

继承：否

可动画化：否

版本：CSS3

JavaScript 语法：object.style.alignItems="center"

定义和用法：

align-items：设置了flex容器的对齐方式。

提示：使用每个flex对象元素的 align-self 属性可重写 align-items 属性。

语法：align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

align-items的属性值：

值             描述

stretch     默认。 拉伸元件以适应容器。

center     中心元素在容器内。

flex-start 位置元素在容器的开头。

flex-end 位置元素在容器的末端。

baseline 位置元素在容器的基线。

initial     设置为默认值。

inherit     从其父元素继承此属性。

。。。。。。

CSS align-self 属性

默认值：auto

继承：否

可动画化：否

版本：CSS3

JavaScript 语法：object.style.alignSelf="center"

定义和用法：

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。。

注意：align-self 属性可重写灵活容器的 align-items 属性。

http://www.iis7.com/a/lm/yczmljgj/

语法：align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

align-seif的属性值：

值             描述

auto       默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

stretch     元素被拉伸以适应容器。

center     元素位于容器的中心。

flex-start 元素位于容器的开头。

flex-end 元素位于容器的结尾。

baseline 元素位于容器的基线上。

initial     设置该属性为它的默认值。

inherit     从父元素继承该属性。

。。。。。。

CSS all 属性

默认值：none

继承：无

动画：否

版本：CSS3

JavaScript 语法：object.style.all="initial"

定义和使用：

all 属性用于重置所有属性，除了 unicode-bidi 和 direction。

语法：all: initial|inherit|unset;

all的属性值：

值        描述

initial修改所有元素属性或父元素的值为其初始化值。

inherit修改所有元素属性或父元素的值为其父元素的值。

unset修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值。

。。。。。。

CSS3 animation 属性

默认值：none 0 ease 0 1 normal

继承性：否

版本：CSS3

JavaScript 语法：object.style.animation="mymove 5s infinite"

定义和用法：

animation 属性是六个动画属性的速记属性： 

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

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

animation的属性值：

值                                           描述

animation-name                   规定需要绑定到选择器的 keyframe 名称。。

animation-duration               规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function   规定动画的速度曲线。

animation-delay                   规定在动画开始之前的延迟。

animation-iteration-count   规定动画应该播放的次数。

animation-direction           规定是否应该轮流反向播放动画。

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

。。。。。。

CSS3 animation-delay 属性

默认值：

继承：no

版本：CSS3

JavaScript 语法：objectobject.style.animationDelay="2s"

定义和用法：

animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

语法：animation-delay: time;

值     描述

time 可选。定义动画开始前等待的时间，以秒或毫秒计，默认值为0。

。。。。。。

CSS3 animation-direction 属性

默认值：normal

继承性：否

版本：CSS3

JavaScript 语法：object.style.animationDirection="alternate"

定义和用法：

animation-direction：属性控制如何在reverse或alternate周期播放动画。 

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

语法：animation-direction: normal|reverse|alternate|alternate-reverse;

animation-direction的属性值：

值                          描述

normal                  以正常的方式播放动画

reverse              以相反方向播放动画 

alternate              播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等...）

alternate-reverse  在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画。

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。

。。。。。。

CSS3 animation-duration 属性

默认值：0

继承：否

版本：CSS3

JavaScript 语法:objectobject.style.animationDuration="3s"

定义和用法：

animation-duration：定义动画完成一个周期需要多少秒或毫秒。

语法：animation-duration: time;

值      说明

time  设置一个动画周期的时间间隔（以秒或毫秒为单位）。 默认值为0，表示不会有动画。

。。。。。。

CSS3 animation-fill-mode 属性

默认值：none

继承性：否

版本：CSS3

JavaScript 语法：object.style.animationFillMode="none"

定义和用法：

animation-fill-mode：设置样式以在动画不播放时应用元素。 

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

语法：animation-fill-mode: none|forwards|backwards|both|initial|inherit;

animation-fill-mode的属性值：

值                描述

none        默认值。无样式

forwards    动画结束后，使用元素的结束属性值。

backwards使用元素的起始值。

both        动画将遵循向前和向后的规则。

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

。。。。。。

CSS3 animation-iteration-count 属性

默认值：1

继承：no

版本：CSS3

JavaScript 语法:objectobject.style.animationIterationCount=3

定义和用法：

animation-iteration-count属性定义动画应该播放多少次。

语法：animation-iteration-count: value;

animation-iteration-count的属性值：

值          描述

n          定义播放动画多少次。 默认值为1。

infinite  指定动画应该播放无限次（永远）。

浏览器支持：

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

。。。。。。

CSS3 animation-name 属性

默认值：none

继承性：no

版本：CSS3

JavaScript 语法：object.style.animationName="mymove"

定义和用法：

animation-name 属性为 @keyframes 动画规定名称。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法：animation-name: keyframename|none;

animation-name的属性值：

值                        描述

keyframename规定需要绑定到选择器的 keyframe 的名称。

none                规定无动画效果（可用于覆盖来自级联的动画）。

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 animation-name 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-name 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

。。。。。。

CSS3 animation-play-state 属性

默认值：running

继承性：no

版本：CSS3

JavaScript 语法：object.style.animationPlayState="paused"

定义和用法：

animation-play-state ：设置是否运行或暂停动画。 

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

语法：animation-play-state: paused|running;

animation-play-state的属性值：

值            描述

paused动画已暂停。

running默认值， 动画正在运行。

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

。。。。。。

CSS3 animation-timing-function 属性

默认值:ease

继承:no

版本:CSS3

JavaScript 语法:objectobject.style.animationTimingFunction="linear"

定义和用法：

animation-timing-function：指定动画速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

语法：animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);

animation-timing-function的属性值：

值                                描述

linear                        动画从开始到结束具有相同的速度。

ease                            动画有一个缓慢的开始，然后快，结束慢。

ease-in                    动画有一个缓慢的开始。

ease-out                    动画结束缓慢。

ease-in-out                动画具有缓慢的开始和慢的结束。

cubic-bezier(n,n,n,n)在立方贝塞尔函数中定义速度函数。 可能的值是从0到1的数字值。

。。。。。。

CSS3 appearance 属性

默认值：normal

继承性：no

版本：CSS3

JavaScript 语法：object.style.appearance="button"

定义和用法：

appearance 属性允许您使元素看上去像标准的用户界面元素。

语法：appearance: normal|icon|window|button|menu|field;

appearance的属性值：

值             描述

normal     将元素呈现为常规元素。

icon         将元素呈现为图标（小图片）。

window 将元素呈现为视口。

button     将元素呈现为按钮。

menu     将元素呈现为一套供用户选择的选项。

field         将元素呈现为输入字段。

浏览器支持：

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

。。。。。。

CSS3 backface-visibility 属性

默认值:visible

继承:no

版本:CSS3

JavaScript语法:object.style.backfaceVisibility="hidden"

定义和用法：

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

语法：backface-visibility: visible|hidden;

backface-visibility的属性值：

值    描述

visible默认值。 背面是可见的。

hidden背面是不可见的。

浏览器支持：

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

。。。。。。

CSS background 属性

默认值:有些有

继承:no

版本:CSS1+ CSS3中的新的属性

JavaScript 语法:objectobject.style.background="red url(smiley.gif) top left no-repeat"

标签定义及使用说明：

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

语法：background:bg-color bg-image position/ bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background的属性值：

值                                说明

background-color    指定要使用的背景颜色

background-position指定背景图像的位置

background-size        指定背景图片的大小

background-repeat    指定如何重复背景图像

background-origin    指定背景图像的定位区域

background-clip        指定背景图像的绘画区域

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

background-image    指定要使用的一个或多个背景图像

浏览器支持：

所有主要浏览器都支持background属性。

注意IE8和更早版本不支持一个元素多个背景图像。

注意 IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

。。。。。。

CSS background-attachment 属性

默认值:scroll

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.backgroundAttachment="fixed"

定义和用法：

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

语法：background-attchment:scroll;

background-attchment的属性值：

值         说明

scroll背景图片随页面的其余部分滚动。这是默认

fixed背景图像是固定的

inherit指定background-attachment的设置应该从父元素继承

local    背景图片随滚动元素滚动

浏览器支持：

注意： Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素。

。。。。。。

CSS background-blend-mode 属性

默认值:normal

继承:no

Animatable:no

版本:CSS3

JavaScript 语法:object.style.backgroundBlendMode="screen"

定义和用法：

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

语法：background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

background-blend-mode的属性值：

值                   描述

normal           默认值。设置正常的混合模式。

multiply       正片叠底模式。

screen           滤色模式。

overlay       叠加模式。

darken           变暗模式。

lighten           变亮模式。

color-dodge   颜色减淡模式。

saturation   饱和度模式。

color           颜色模式。

luminosity   亮度模式。

。。。。。。

CSS3 background-clip 属性

默认值:border-box

继承:no

版本:CSS3

JavaScript 语法:object object.style.backgroundClip="content-box"

定义和用法：

background-clip属性指定背景绘制区域。

语法：background-clip: border-box|padding-box|content-box;

background-clip的属性值：

值                    说明

border-box    默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box背景绘制在衬距方框内（剪切成衬距方框）。

content-box背景绘制在内容方框内（剪切成内容方框）。

。。。。。。

CSS background-color 属性

默认值:transparent

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.backgroundColor="#00FF00"

标签定义及使用说明：

background-color属性设置一个元素的背景颜色。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

语法：background-color: #;

background-color的属性值：

值                 描述

color         指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。

transparent 指定背景颜色应该是透明的。这是默认。

inherit         指定背景颜色，应该从父元素继承。

。。。。。。

CSS background-image 属性

默认值:none

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.backgroundImage="url(stars.gif)"

标签定义及使用说明：

background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示和注释：务必设置背景色，如果图像是不可用，将被使用。

语法：background-image：url（“#”）；

background-image的属性值：

值            说明

url('URL')图像的URL

none    无图像背景会显示。这是默认

inherit    指定背景图像应该从父元素继承

。。。。。。

CSS3 background-origin 属性

默认值:padding-box

继承:no

版本:CSS3

JavaScript 语法:objectobject.style.backgroundOrigin="content-box"

定义和用法：

background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

语法：background-origin: padding-box|border-box|content-box;

background-orgin的属性值：

值                     描述

padding-box背景图像填充框的相对位置

border-box    背景图像边界框的相对位置

content-box背景图像的相对位置的内容框

。。。。。。

CSS background-position 属性

默认值:0% 0%

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.backgroundPosition="center"

定义和用法：

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。

语法：background-position: horizontal vertical

水平是：percentage | length | left | center | right 

垂直是：percentage | length | top | center | bottom 

background-position的属性值：

值                                  描述

left top

left center

left bottom

right top                    如果仅指定一个关键字，其他值将会是"center"

right center

right bottom

center top

center center

center bottom

x% y%              第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％

xpos ypos      第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

inherit              指定background-position属性设置应该从父元素继承。

浏览器支持：

注意: IE8 及更早的浏览器版本不支持一个元素有多个背景图片。

。。。。。。

CSS background-repeat 属性

默认值:repeat

继承:no

版本:CSS1

JavaScript 语法:object.style.backgroundRepeat="repeat-y"

标签定义及使用说明：

设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。

语法：background-repeat:

background-repeat的属性值：

值                 说明

repeat         背景图像将向垂直和水平方向重复。这是默认

repeat-x     只有水平位置会重复背景图像

repeat-y     只有垂直位置会重复背景图像

no-repeat background-image不会重复

inherit         指定background-repea属性设置应该从父元素继承

浏览器支持：

IE8以及更早版本的浏览器不支持多个背景图像在一个元素。

注意 IE7和更早的版本不支持"inherit（继承）"的值。 IE8需要定义！DOCTYPE。 IE9支持"inherit（继承）"。

。。。。。。

CSS3 background-size 属性

默认值:auto

继承:no

版本:CSS3

JavaScript 语法:objectobject.style.backgroundSize="60px 80px"

标签定义及使用说明：

background-size属性指定背景图片大小。

语法：background-size: length|percentage|cover|contain;

background-size的属性值：

值                 描述

length        设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover        此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain    此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

。。。。。。

CSS border 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.border="3px solid blue"

标签定义及使用说明：

缩写边框属性设置在一个声明中所有的边框属性。

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.

如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。

border的属性值：

值                    说明

border-width指定边框的宽度

border-style指定边框的样式

border-color指定边框的颜色

inherit            指定应该从父元素继承border属性值

。。。。。。

CSS border-bottom 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderBottom="3px solid blue"

标签定义及使用说明：

border-bottom缩写属性设置一个声明中所有底部边框属性。

可以设置的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color.

如果上述值缺少一个没有关系，例如border-bottom：＃FF0000;是允许的。

属性值：

值                                描述

border-bottom-width指定底部边框宽度

border-bottom-style指定底部边框样式

border-bottom-color指定底部边框颜色

inherit                        指定border-bottom 属性值，应该从父元素继承

。。。。。。

CSS border-bottom-color 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderBottomColor="blue"

标签定义及使用说明：

border-bottom-color属性设置元素的底部边框颜色。

注意 使用border-bottom颜色属性前，必须先声明border样式属性。元素必须有边框，你才可以改变颜色。

属性值：

值              描述

color        指定背景颜色。在CSS颜色值 查找颜色值的完整列表。

transparent指定边框的颜色应该是透明的。这是默认

inherit        指定边框的颜色，应该从父元素继承

浏览器支持：

所有主要浏览器都支持border-bottom-color属性。

注意 Internet Explorer6（和更早版本）不支持"transparent"属性值。

注意 IE7和更早的版本不支持"inherit(继承)"的值。 IE8需要定义！DOCTYPE。 IE9支持"inherit(继承)"。

。。。。。。

CSS3 border-bottom-left-radius 属性

默认值：

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderBottomLeftRadius="5px"

定义和用法：

border-bottom-left-radius 属性定义左下角边框的形状。

提示：该属性允许您向元素添加圆角边框。

注释：border-bottom-left-radius属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。

语法：border-bottom-left-radius: length|% [length|%];

border-bottom-left-radius的属性值：

值        描述

length定义左下角的形状。

%        以百分比值定义左下角的形状。

浏览器支持：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-left-radius 属性。

。。。。。。

CSS3 border-bottom-right-radius 属性

默认值：

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderBottomRightRadius="5px"

定义和用法：border-bottom-right-radius 属性定义右下角边框的形状。

提示：该属性允许您向元素添加圆角边框。

语法：border-bottom-right-radius: length|% [length|%];

border-bottom-right-radius的属性值：

值        描述

length定义右下角的形状。

%        以百分比值定义右下角的形状。

浏览器支持：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-right-radius 属性。

。。。。。。

CSS border-bottom-style 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderBottomStyle="dotted"

属性定义及使用说明：

border-bottom-style属性设置元素底部边框样式。

属性值：

值           说明

none   指定无边框

hidden   与"none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted   指定点状边框

dashed   指定虚线边框

solid       指定实线边框

double   指定一个双边框

groove   定义双线。双线的宽度等于 border-width 的值

ridge   定义三维菱形边框。其效果取决于 border-color 的值

inset   定义三维凹边框。其效果取决于 border-color 的值

outset   定义三维凸边框。其效果取决于 border-color 的值

inherit   指定应该从父元素继承边框样式

。。。。。。

CSS border-bottom-width 属性

默认值:medium

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderBottomWidth="thick"

属性定义及使用说明：

border-bottom-width属性设置元素的底部边框宽度。

注意务必先声明border-style属性才可以设置border-bottom-width属性。元素必须有边框，你才可以改变宽度。

属性值：

值           说明

thin       定义细的下边框

medium  默认值。定义中等的下边框

thick   定义粗的下边框

length   允许您自定义下边框的宽度

inherit   规定应该从父元素继承边框宽度

。。。。。。

CSS border-collapse 属性

默认值:separate

继承:是

版本:CSS2

JavaScript 语法:objectobject.style.borderCollapse="collapse"

属性定义及使用说明：

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

有可能的属性值：

值            说明

collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性

separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性

inherit   规定应该从父元素继承 border-collapse 属性的值

浏览器支持：

所有主要浏览器都支持border - collapse属性。

注意： 任何版本的Internet Explorer（包括IE9）支持属性值"inherit"。

注意: border - collapse属性,如果没有指定!DOCTYPE，可能产生意想不到的效果。

。。。。。。

CSS border-color 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderColor="#FF0000 blue"

属性定义及使用说明：

border-color属性属性设置四条边框的颜色,此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：

实例：

border-color:红，绿，蓝,粉红色;

上边框是红色

右边框是绿色

底部边框是蓝

左边框是粉红色

border-color：红，绿，蓝;

上边框是红色

左，右边框是绿色

底部边框是蓝

border-color：红，绿;

顶部和底部边框是红色

左右边框是绿色

border-color：红色;

所有四个边框是红色

注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

属性值：

值                  说明

color          指定背景颜色。在CSS颜色值查找颜色值的完整列表

transparent  指定边框的颜色应该是透明的。这是默认

inherit          指定边框的颜色，应该从父元素继承

。。。。。。

CSS3 border-image 属性

默认值：none 100% 1 0 stretch

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderImage="url(border.png) 30 30 round"

定义和用法：

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

如果省略值，会设置其默认值。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

可能的值：

值                                 描述

border-image-source 用在边框的图片的路径。 

border-image-slice     图片边框向内偏移。 

border-image-width 图片边框的宽度。 

border-image-outset 边框图像区域超出边框的量。 

border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

浏览器支持：

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。

Safari 5 支持替代的 -webkit-border-image 属性。

。。。。。。

CSS3 border-image-outset 属性

默认值：

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderImageOutset="30 30"

定义和用法：

border-image-outset 属性规定边框图像超过边框盒的量。

注释：border-image-outset属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

语法：border-image-outset: length|number;

可能的值：

值             描述

length 

number代表对应的 border-width 的倍数。

。。。。。。

CSS3 border-image-repeat 属性

默认值：stretch

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderImageRepeat="round"

定义和用法：

border-image-repeat 属性规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。

注释：该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

语法：border-image-repeat: stretch|repeat|round;

可能的值：

值          描述

stretch  拉伸图像来填充区域

repeat  平铺（重复）图像来填充区域。

round  类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

浏览器支持：

Opera 不支持 border-image-repeat 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-repeat 属性。

Safari 5 以及更早的版本不支持 border-image-repeat 属性。

。。。。。。

CSS3 border-image-source 属性

默认值：none

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderImageSource="url(border.png)"

定义和用法：

border-image-source 属性规定要使用的图像，代替 border-style 属性中设置的边框样式。

提示：如果值为 "none"，或者如果图像无法显示，则使用边框样式。

语法：border-image-source: none|image;

可能的属性值：

值        描述

none不使用图像。

image用作边框的图像的路径。

。。。。。。

CSS3 border-image-width 属性

默认值：none

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderImageWidth="30 30"

定义和用法：

border-image-width 属性规定图像边框的宽度。

注意：border-image-width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

语法：border-image-width: number|%|auto;

属性值：

值            描述

number代表对应的 border-width 的倍数。

%            参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。

auto        如果规定该属性，则宽度为对应的图像切片的固有宽度。

浏览器支持：

Opera 不支持 border-image-width 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-width 属性。

Safari 5 以及更早的版本不支持 border-image-width 属性。

。。。。。。

CSS border-left 属性

默认值：not specified

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderLeft="3px solid blue"

属性定义及使用说明：

border-left 简写属性把左边框的所有属性设置到一个声明中。

可以按顺序设置如下属性： border-left-width, border-left-style, and border-left-color.

如果不设置其中的某个值，也不会出问题，比如 border-left:solid #ff0000; 也是允许的。

属性值：

值                            描述

border-left-width规定左边框的宽度。参阅：border-left-width 中可能的值。

border-left-style    规定左边框的样式。参阅：border-left-style 中可能的值。

border-left-color    规定左边框的颜色。参阅：border-left-color 中可能的值。

inherit                    规定应该从父元素继承 border-left 属性的设置。

。。。。。。

CSS border-left-color 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:object object.style.borderLeftColor="blue"

属性定义及使用说明：

border-left-color属性设置一个元素的左边框颜色。

注意 请始终把border-style属性声明到border-color属性之前。元素必须在您改变其颜色之前获得边框。

属性值：

值                说明

color        指定左边框颜色。在CSS颜色值查找颜色值的完整列表。

transparent指定边框的颜色应该是透明的。这是默认

inherit        指定边框的颜色，应该从父元素继承

。。。。。。

CSS border-left-style 属性

默认值：not specified

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderLeftStyle="dotted"

属性定义及使用说明：

border-left-style 设置元素左边框的样式。

属性值：

值            描述

none    定义无边框。

hidden    与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted    定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。

solid        定义实线。

double    定义双线。双线的宽度等于 border-width 的值。

groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。

inset    定义 3D inset 边框。其效果取决于 border-color 的值。

outset    定义 3D outset 边框。其效果取决于 border-color 的值。

inherit    规定应该从父元素继承边框样式。

。。。。。。

CSS border-left-width 属性

默认值：medium

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderLeftWidth="thick"

属性定义及使用说明：

border-left-width 属性设置元素的左边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注意:请始终在 border-left-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

属性值：

值            描述

thin        定义细的左边框。

medium默认值。定义中等的左边框。

thick    定义粗的左边框。

length   允许您自定义左边框的宽度。

inherit   规定应该从父元素继承边框宽度。

。。。。。。

CSS3 border-image-slice 属性

默认值：100%

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderImageSlice="50% 50%"

定义和用法：

border-image-slice 属性规定图像边框的向内偏移。

注释：该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。

语法：border-image-slice: number|%|fill;

属性值：

值            描述

number数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。

%            相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。

fill        保留边框图像的中间部分。

浏览器支持：

Opera 不支持 border-image-slice 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-slice 属性。

Safari 5 以及更早的版本不支持 border-image-slice 属性。

。。。。。。

CSS3 border-radius 属性

默认值：

继承性：no

版本：CSS3

JavaScript 语法：object.style.borderRadius="5px"

定义和用法：

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

语法：border-radius: 1-4 length|% / 1-4 length|%;

属性值：

值        描述

length定义圆角的形状。

%        以百分比定义圆角的形状。

浏览器支持：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

。。。。。。

CSS border-right 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderRight="3px solid blue"

属性定义及使用说明：

border-right 简写属性把左边框的所有属性设置到一个声明中。

可以设置的属性是（按顺序）：border-right-width, border-right-style, and border-right-color.

如果上述值缺少一个，没有关系，例如border-right:solid #ff0000; 是允许的。

属性值：

值                            说明

border-right-width指定右边框的宽度

border-right-style指定右边框的样式

border-right-color指定右边框的颜色

inherit                    指定了border-right属性的值，应该从父元素继承

浏览器支持：

所有主要浏览器都支持border-right属性。

注意IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

。。。。。。

CSS border-right-color 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderRightColor="blue"

属性定义及使用说明：

border-right-color属性设置一个元素的的右边框的颜色。

注意 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

属性值：

值                    描述

color_name    规定颜色值为颜色名称的边框颜色（比如 red）。

hex_number规定颜色值为十六进制值的边框颜色（比如 #ff0000）。

rgb_number规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。

transparent    默认值。边框颜色为透明。

inherit            规定应该从父元素继承边框颜色。

浏览器支持：

所有主要浏览器都支持border-right-color属性。

注意： Internet Explorer6（和更早版本）不支持"transparent"属性值。

注意：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

。。。。。。

CSS border-right-style 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:objectobject.style.borderRightStyle="dotted"

属性定义及使用说明：

border-right-style属性设置元素右边框的样式。

属性值：

值         描述

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid     定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

。。。。。。

CSS border-right-width 属性

默认值：medium

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderRightWidth="thick"

属性定义及使用说明：

border-right-width属性设置一个元素右边框的宽度。

注意 请始终在 border-right-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

属性值：

值            描述

thin        定义细的右边框。

medium默认值。定义中等的右边框。

thick    定义粗的右边框。

length    允许您自定义右边框的宽度。

inherit    规定应该从父元素继承边框宽度。

浏览器支持：

所有浏览器都支持 border-right-width 属性。

注意：IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

。。。。。。

CSS border-spacing 属性

默认值：not specified

继承性：yes

版本：CSS2

JavaScript 语法：object.style.borderSpacing="15px"

定义和用法：

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

注释：某些版本的IE浏览器不支持此属性。

说明：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

可能的值：

值                    描述

length length规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

inherit           规定应该从父元素继承 border-spacing 属性的值。

。。。。。。

CSS border-style 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:object object.style.borderStyle="dotted double"

属性定义及使用说明：

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

实例：

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

border-style:dotted;

所有4个边框都是点状

属性值：

值         描述

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid     定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

。。。。。。

CSS border-top 属性

默认值：not specified

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderTop="3px solid blue"

属性定义及使用说明：

border-top 简写属性把上边框的所有属性设置到一个声明中

可以按顺序设置如下属性： border-top-width, border-top-style, and border-top-color.

如果不设置其中的某个值，也不会出问题，比如 border-top:solid #ff0000; 也是允许的。

属性值：

值                            描述

border-top-width规定上边框的宽度。参阅：border-top-width 中可能的值。

border-top-style    规定上边框的样式。参阅：border-top-style 中可能的值。

border-top-color    规定上边框的颜色。参阅：border-top-color 中可能的值。

inherit                    规定应该从父元素继承 border-top 属性的设置。

。。。。。。

CSS border-top-color 属性

默认值：not specified

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderTopColor="blue"

属性定义及使用说明：

border-top-color 设置元素的上边框的颜色。

注意：请始终把border-style属性声明到border-top-color属性之前。元素必须在您改变其颜色之前获得边框。

属性值：

值              描述

color_name  规定颜色值为颜色名称的边框颜色（比如 red）。

hex_number  规定颜色值为十六进制值的边框颜色（比如 #ff0000）。

rgb_number  规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。

transparent  默认值。边框颜色为透明。

inherit          规定应该从父元素继承边框颜色。

。。。。。。

CSS3 border-top-left-radius 属性

默认值:

继承:no

版本:CSS3

JavaScript 语法:objectobject.style.borderTopLeftRadius="5px"

属性定义及使用说明：

border-top-left-radius属性定义了左上角的边框形状。

提示：这个属性允许你为元素添加圆角边框！

注意：border-top-left--radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。

语法：border-top-left-radius: length|% [length|%];

属性值：

值        描述

length定义左上角的形状。

%        使用%定义左上角的形状。

。。。。。。

CSS3 border-top-right-radius 属性

默认值:

继承:no

版本:CSS3

JavaScript 语法:objectobject.style.borderTopRightRadius="5px"

属性定义及使用说明：

border-top-right-radius属性定义了右上角的边框形状。

提示: 这个属性允许你为元素添加圆角边框！

注意：border-top-right--radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。

语法：border-top-right-radius: length|% [length|%];

属性值：

值        描述

length定义右上角的形状。

%        使用%定义右上角的形状。

。。。。。。

CSS border-top-style 属性

默认值：not specified

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderTopStyle="dotted"

属性定义及使用说明：

border-top-style属性设置一个元素的顶部边框样式。

属性值：

值         描述

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid     定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

。。。。。。

CSS border-top-width 属性

默认值:medium

继承:no

版本:CSS1

JavaScript 语法:object object.style.borderTopWidth="thick"

属性定义及使用说明：

border-top-width属性设置一个元素的顶部边框的宽度。

注意:请始终在 border-top-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

属性值：

值            描述

thin        定义细的上边框。

medium默认值。定义中等的上边框。

thick    定义粗的上边框。

length    允许您自定义上边框的宽度。

inherit    规定应该从父元素继承边框宽度。

。。。。。。

CSS border-width 属性

默认值：medium

继承性：no

版本：CSS1

JavaScript 语法：object.style.borderWidth="thin thick"

属性定义及使用说明：

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

实例：

border-width:thin medium thick 10px;

上边框是细边框

右边框是中等边框

下边框是粗边框

左边框是 10px 宽的边框

border-width:thin medium thick;

上边框是细边框

右边框和左边框是中等边框

下边框是粗边框

border-width:thin medium;

上边框和下边框是细边框

右边框和左边框是中等边框

border-width:thin;

所有4个边框都是细边框

属性值：

值            描述

thin        定义细的边框。

medium默认。定义中等的边框。

thick    定义粗的边框。

length    允许您自定义边框的宽度。

inherit    规定应该从父元素继承边框宽度。

。。。。。。

CSS bottom 属性

默认值：auto

继承性：no

版本：CSS2

JavaScript 语法：object.style.bottom="50px"

属性定义及使用说明：

对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。

注意：如果"position：static"，底部的属性没有任何效果。

说明：对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

属性值：

值         描述

auto     默认值。通过浏览器计算底部的位置。

%         设置以包含元素的百分比计的底边位置。可使用负值。

length 使用 px、cm 等单位设置元素的底边位置。可使用负值。

inherit 规定应该从父元素继承 bottom 属性的值。

。。。。。。

CSS3 box-align 属性

默认值：stretch

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxAlign="center"

定义和用法：

box-align 属性规定如何对齐框的子元素。

语法：box-align: start|end|center|baseline|stretch;

属性值：

值        描述

start    对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。

end    对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。

center均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。

baseline如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。

stretch 拉伸子元素以填充包含块。

浏览器支持：

目前没有浏览器支持 box-align 属性。

Firefox 支持替代的 -moz-box-align 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。

。。。。。。

CSS3 box-direction 属性

默认值：normal

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxDirection="reverse"

定义和用法：

box-direction 属性规定框元素的子元素以什么方向来排列。

语法：box-direction: normal|reverse|inherit;

属性值：

值           描述

normal   以默认方向显示子元素。

reverse   以反方向显示子元素。

inherit   应该从子元素继承 box-direction 属性的值

浏览器支持：

目前没有浏览器支持 box-direction 属性。

Firefox 支持替代的 -moz-box-direction 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 属性。

。。。。。。

CSS3 box-flex 属性

默认值：0.0（指示该元素不可伸缩）

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxFlex=2.0

定义和用法：

box-flex 属性规定框的子元素是否可伸缩其尺寸。

提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

语法：box-flex: value;

值        描述

value元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

浏览器支持：

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

。。。。。。

CSS3 box-flex-group 属性

默认值：1

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxFlexGroup=2

定义和用法：

box-flex-group 属性用于向柔性分组分配可伸缩元素。

提示：可伸缩元素能够随着框的缩小和扩大而伸缩。

语法：box-flex-group: integer;

值            描述

integer一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。

浏览器支持：

目前没有浏览器支持 box-flex-group 属性。

。。。。。。

CSS3 box-lines 属性

默认值：single

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxLines="multiple"

定义和用法：

box-lines 属性规定如果列超出了父框中的空间，是否要换行显示。

提示：默认地，水平框会在单独的行中排列其子元素，而垂直框会在单独的列中排列其子元素。

语法：box-lines: single|multiple;

值          描述

single  所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。

multiple 允许框扩展为多行，以容纳其所有子元素。

浏览器支持：

目前没有浏览器支持 box-lines 属性。

。。。。。。

CSS3 box-ordinal-group 属性

默认值：1

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxOrdinalGroup=2

定义和用法：

box-ordinal-group 属性规定框中子元素的显示次序。

值更低的元素会显示在值更高的元素前面显示。

注释：分组值相同的元素，它们的显示次序取决于其源次序。

语法：box-ordinal-group: integer;

值            描述

integer一个整数，指示子元素的显示次序。

浏览器支持：

目前没有浏览器支持 box-ordinal-group 属性。

Firefox 支持替代的 -moz-box-ordinal-group 属性。

Safari 和 Chrome 支持替代的 -webkit-box-ordinal-group 属性。

。。。。。。

CSS3 box-orient 属性

默认值:inline-axis

继承:no

版本:CSS3

JavaScript 语法:object.style.boxOrient="vertical"

属性定义及使用说明：

box-orient 属性指定一个box子元素是否应按水平或垂直排列。

Tip: 水平方向的box里的子元素是由左到右显示，垂直方向的box显示从上到下排列。然而，box-direction方向可由 box-ordinal-group属性改变这个顺序。

语法：box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

属性值：

值                说明

horizontal指定子元素在一个水平线上从左至右排列

vertical    从顶部向底部垂直布置子元素

inline-axis子元素沿着内联坐标轴（映射到横向）

block-axis子元素沿着块坐标轴（映射到垂直）

inherit        box-orient 属性的值应该从父元素继承

。。。。。。

CSS3 box-pack 属性

默认值:start

继承:no

版本:CSS3

JavaScript 语法:object.style.boxPack="center"

属性定义及使用说明：

box-pack属性指定一个box的子元素时，被置于该框的子元素小于该框。

此属性指定横向框的水平位置，垂直位置的垂直框。

语法：box-pack: start|end|center|justify;

属性值：

值        说明

start

对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）

end

对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）

center额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素

justify额外的空间平均分配给每个子元素

浏览器支持：

目前主流浏览器都不支持box-pack属性。

Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。

Firefox通过私有属性- MOZ-box-pack支持。

Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.

注意： Internet Explorer 9及更早IE版本不支持弹性框.

。。。。。。

CSS3 box-shadow 属性

默认值：none

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxShadow="10px 10px 5px #888888"

定义和用法：

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是 0。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

属性值：

值                 描述

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur             可选。模糊距离。

spread         可选。阴影的尺寸。

color         可选。阴影的颜色。请参阅 CSS 颜色值。

inset         可选。将外部阴影 (outset) 改为内部阴影。

浏览器支持：

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

。。。。。。

CSS3 box-sizing 属性

默认值：content-box

继承性：no

版本：CSS3

JavaScript 语法：object.style.boxSizing="border-box"

定义和用法：

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

语法：box-sizing: content-box|border-box|inherit;

属性值：

值               描述

content-box   这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit           规定应从父元素继承 box-sizing 属性的值。

浏览器支持：

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

。。。。。。

CSS caption-side 属性

默认值：top

继承性：yes

版本：CSS2

JavaScript 语法：object.style.captionSide="bottom"

属性定义及使用说明：

Tcaption-side 属性设置表格标题的位置。

属性值：

值             描述

top         默认值。把表格标题定位在表格之上。

bottom 把表格标题定位在表格之下。

inherit     规定应该从父元素继承 caption-side 属性的值。

浏览器支持：

所有主流浏览器都支持caption-side属性。

注意：IE8只有指定!DOCTYPE才支持caption-side属性。

。。。。。。

CSS clear 属性

默认值：none

继承性：no

版本：CSS1

JavaScript 语法：object.style.clear="left"

属性定义及使用说明：

clear属性指定段落的左侧或右侧不允许浮动的元素。

属性值：

值         描述

left     在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

inherit 规定应该从父元素继承 clear 属性的值。

。。。。。。

CSS clip 属性

默认值:auto

继承:no

版本:CSS2

JavaScript 语法:object.style.clip="rect(0px,50px,50px,0px)"

属性定义及使用说明：

如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

注意：: 如果先有"overflow：visible"，clip属性不起作用。

属性值：

值        描述

shape设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)

auto    默认值。不应用任何剪裁。

inherit规定应该从父元素继承 clip 属性的值。

。。。。。。

CSS color 属性

默认值:not specified

继承:no

版本:CSS1

JavaScript 语法:object.style.color="#FF0000"

属性定义及使用说明：

Color属性指定文本的颜色。

提示：请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。

属性值：

值                  描述

color_name  规定颜色值为颜色名称的颜色（比如 red）。

hex_number  规定颜色值为十六进制值的颜色（比如 #ff0000）。

rgb_number  规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。

inherit          规定应该从父元素继承颜色。

。。。。。。

CSS3 column-count 属性

默认值：auto

继承性：no

版本：CSS3

JavaScript 语法：object.style.columnCount=3

定义和用法：

column-count 属性规定元素应该被划分的列数。

语法：column-count: number|auto;

属性值：

值            描述

number元素内容将被划分的最佳列数。

auto        由其他属性决定列数，比如 "column-width"。

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-count 属性。

Firefox 支持替代的 -moz-column-count 属性。

Safari 和 Chrome 支持替代的 -webkit-column-count 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。

。。。。。。

CSS3 column-fill 属性

默认值：balance

继承性：no

版本：CSS3

JavaScript 语法：object.style.columnFill="auto"

定义和用法：

column-fill 属性规定如何填充列（是否进行协调）。

语法：column-fill: balance|auto;

值            描述

balance对列进行协调。浏览器应对列长度的差异进行最小化处理。

auto        按顺序对列进行填充，列长度会各有不同。

浏览器支持：

主流浏览器都不支持 column-fill 属性。

。。。。。。

CSS3 column-gap 属性

默认值：normal

继承性：no

版本：CSS3

JavaScript 语法：object.style.columnGap="40px"

定义和用法：

column-gap 属性规定列之间的间隔。

注释：如果列之间设置了 column-rule，它会在间隔中间显示。

语法：column-gap: length|normal;

值          描述

length  把列间的间隔设置为指定的长度。

normal  规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-gap 属性。

Firefox 支持替代的 -moz-column-gap 属性。

Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。

。。。。。。

CSS3 column-rule 属性

默认值:medium none black

继承:no

版本:CSS3

JavaScript 语法:object.style.columnRule="3px outset #ff00ff"

属性定义及使用说明：

column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

语法：column-rule: column-rule-width column-rule-style column-rule-color;

属性值：

值                            说明

column-rule-width设置列中之间的宽度规则

column-rule-style设置列中之间的样式规则

column-rule-color设置列中之间的颜色规则

。。。。。。

CSS3 column-rule-color 属性

默认值:black

继承:no

版本:CSS3

JavaScript 语法:object.style.columnRuleColor="#ff00ff"

属性定义及使用说明：

column-rule-color属性指定列之间的颜色规则。

语法：column-rule-color: color;

值        描述

color指定颜色的规则。在CSS颜色值寻找颜色值的完整列表。

。。。。。。

CSS3 column-rule-style 属性

默认值:none

继承:no

版本:CSS3

JavaScript 语法:object.style.columnRuleStyle="dotted"

属性定义及使用说明：

column-rule-style属性指定列之间的样式规则。

语法：column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

值         描述

none 定义没有规则。

hidden 定义隐藏规则。

dotted 定义点状规则。

dashed 定义虚线规则。

solid     定义实线规则。

double 定义双线规则。

groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。

ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。

inset 定义 3D inset 规则。该效果取决于宽度和颜色值。

outset 定义 3D outset 规则。该效果取决于宽度和颜色值。

。。。。。。

CSS3 column-rule-width 属性

默认值:medium

继承:no

版本:CSS3

JavaScript 语法:object.style.columnRuleWidth="thin"

属性定义及使用说明：

column-rule-width属性指定列之间的宽度规则。

语法：column-rule-width: thin|medium|thick|length;

值            说明

thin        指定一个细边框的规则

medium定义一个中等边框规则

thick    指定一个粗边框的规则

length    指定宽度的规则

。。。。。。

CSS3 column-span 属性

默认值：1

继承性：no

版本：CSS3

JavaScript 语法：object.style.columnSpan="all"

定义和用法：

column-span 属性规定元素应横跨多少列。

语法：column-span: 1|all;

值  描述

1  元素应横跨一列。

all  元素应横跨所有列。

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-span 属性。

Safari 和 Chrome 支持替代的 -webkit-column-span 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。

。。。。。。

CSS3 column-width 属性

默认值：auto

继承性：no

版本：CSS3

JavaScript 语法：object.style.columnWidth="100px"

定义和用法：

column-width 属性规定列的宽度。

语法：column-width: auto|length;

值        描述

auto    由浏览器决定列宽。

length规定列的宽度。

浏览器支持：

Internet Explorer 10 和 Opera 支持 column-width 属性。

Firefox 支持替代的 -moz-column-width 属性。

Safari 和 Chrome 支持替代的 -webkit-column-width 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

。。。。。。

CSS3 columns 属性

默认值：auto auto

继承性：no

版本：CSS3

JavaScript 语法：object.style.columns="100px 3"

定义和用法：

columns 属性是一个简写属性，用于设置列宽和列数。

语法：columns: column-width column-count;

值                    描述

column-width列的宽度。

column-count列数。

浏览器支持：

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

。。。。。。

CSS content 属性

默认值：normal

继承：no

版本：CSS2

JavaScript 语法：object.style.content="url(beep.wav)"

属性定义及使用说明：

ontent 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

Content属性值：

值                       说明

none               设置Content，如果指定成Nothing

normal               设置content，如果指定的话，正常，默认是"none"（该是nothing）

counter               设定计数器内容

attr(attribute)    设置Content作为选择器的属性之一。

string                设置Content到你指定的文本

open-quote        设置Content是开口引号

close-quote        设置Content是闭合引号

no-open-quote如果指定，移除内容的开始引号

no-close-quote如果指定，移除内容的闭合引号

url(url)                设置某种媒体（图像，声音，视频等内容）

inherit                指定的content属性的值，应该从父元素继承

浏览器支持：

所有主流浏览器都支持Content属性。

注意： IE8只有指定!DOCTYPE才支持Content属性。

。。。。。。

CSS counter-increment 属性

默认值：none

继承：no

版本：CSS2

JavaScript 语法：object.style.counterIncrement="subsection"

属性定义及使用说明：

counter-increment属性递增一个或多个计数器值。

counter-increment属性通常用于counter-reset属性和content属性。

属性值：

值                说明

none        没有计数器将递增

id numberid 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。

inherit        指定counter-increment属性的值，应该从父元素继承。

浏览器支持：

所有主流浏览器都支持counter-increment属性。

注意：IE8只有指定!DOCTYPE才支持counter-increment属性。

。。。。。。

CSS counter-reset 属性

默认值：none

继承：no

版本：CSS2

JavaScript 语法：object.style.counterReset="subsection"

属性定义及使用说明：

counter-reset属性创建或重置一个或多个计数器。

counter-reset属性通常是和counter-increment属性，content属性一起使用。

属性值：

值                 说明

none         默认。不能对选择器的计数器进行重置

id number id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。

inherit         规定应该从父元素继承 counter-reset 属性的值。

浏览器支持：

所有主流浏览器都支持counter-reset属性。

注意： IE8只有指定!DOCTYPE才支持counter-reset属性。

。。。。。。

CSS cursor 属性

默认值：auto

继承：yes

版本：CSS2

JavaScript 语法：object.style.cursor="crosshair"

属性定义及使用说明：

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

属性值：

值            描述

url        需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default    默认光标（通常是一个箭头）

auto        默认。浏览器设置的光标。

crosshair光标呈现为十字线。

pointer    光标呈现为指示链接的指针（一只手）

move    此光标指示某对象可被移动。

e-resize此光标指示矩形框的边缘可被向右（东）移动。

ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。

nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。

n-resize此光标指示矩形框的边缘可被向上（北）移动。

se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。

sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize此光标指示矩形框的边缘可被向下移动（北/西）。

w-resize此光标指示矩形框的边缘可被向左移动（西）。

text        此光标指示文本。

wait        此光标指示程序正忙（通常是一只表或沙漏）。

help        此光标指示可用的帮助（通常是一个问号或一个气球）。

。。。。。。

CSS direction 属性

默认值：ltr

继承：yes

版本：CSS2

JavaScript 语法：object.style.direction="rtl"

属性定义及使用说明：

direction属性指定文本方向/书写方向。

属性值：

值        描述

ltr        默认。文本方向从左到右。

rtl        文本方向从右到左。

inherit规定应该从父元素继承 direction 属性的值。

。。。。。。

CSS display 属性

默认值：inline

继承：no

版本：CSS1

JavaScript 语法：object.style.display="inline"

属性定义及使用说明：

display 属性规定元素应该生成的框的类型。

属性值：

值            描述

none    此元素不会被显示。

block    此元素将显示为块级元素，此元素前后会带有换行符。

inline    默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block行内块元素。（CSS2.1 新增的值）

list-item此元素会作为列表显示。

run-in    此元素会根据上下文作为块级元素或内联元素显示。

compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker    CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

inline-table此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。

table-footer-group此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

table-row   此元素会作为一个表格行显示（类似 <tr>）。

table-column-group此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

table-column此元素会作为一个单元格列显示（类似 <col>）

table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

table-caption此元素会作为一个表格标题显示（类似 <caption>）

inherit规定应该从父元素继承 display 属性的值。

。。。。。。

CSS Empty-cells 属性

默认值：show

继承：yes

版本：CSS2

JavaScript 语法：object.style.emptyCells="hide"

属性定义及使用说明：

empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。

属性值：

值        描述

hide    不在空单元格周围绘制边框。

show在空单元格周围绘制边框。默认。

inherit规定应该从父元素继承 empty-cells 属性的值。

浏览器支持：

所有主流浏览器都支持empty-cells属性。

注意：只有指定!DOCTYPE，IE8才支持empty-cells属性。

。。。。。。

CSS3 filter(滤镜) 属性

默认值:none

继承:no

动画支持:是。详细可查阅 CSS 动画

版本:CSS3

JavaScript 语法:object.style.WebkitFilter="grayscale(100%)"

定义和使用：

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

语法：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

注意：滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter 函数：

Filter           描述

none：           默认值，没有效果。

blur(px)：   给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

contrast(%)：调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：

<offset-x> <offset-y> (必须)  这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.

如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).

<blur-radius> (可选)

这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).

<spread-radius> (可选)

这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 

注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。

 <color> (可选)

查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

grayscale(%)：

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

hue-rotate(deg)：

给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

invert(%)：

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

opacity(%)：

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

saturate(%)

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

sepia(%)：

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

url()：

URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

例如：filter: url(svg-url#element-id)

initial设置属性为默认值。

inherit从父元素继承该属性。

浏览器支持：

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

。。。。。。

CSS flex 属性

默认值：0 1 auto

继承：否

可动画化：是，

版本：CSS3

JavaScript 语法：object.style.flex="1"

定义和用法：

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值：

值                描述

flex-grow    一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis    项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

auto            与 1 1 auto 相同。

none        与 0 0 auto 相同。

initial        设置该属性为它的默认值，即为 0 1 auto。

inherit        从父元素继承该属性。

。。。。。。

CSS flex-basis 属性

默认值：auto

继承：否

可动画化：是

版本：CSS3

JavaScript 语法：object.style.flexBasis="200px"

定义和用法：

flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

语法：flex-basis: number|auto|initial|inherit;

属性值：

值            描述

number一个长度单位或者一个百分比，规定灵活项目的初始长度。

auto        默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

initial    设置该属性为它的默认值。

inherit    从父元素继承该属性。

。。。。。。

CSS flex-direction 属性

默认值：row

继承：否

可动画化：否。

版本：CSS3

JavaScript 语法：object.style.flexDirection="column-reverse"

定义和用法：

flex-direction 属性规定灵活项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

语法：flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

属性值：

值                描述

row            默认值。灵活的项目将水平显示，正如一个行一样。

row-reverse与 row 相同，但是以相反的顺序。

column    灵活的项目将垂直显示，正如一个列一样。

column-reverse与 column 相同，但是以相反的顺序。

initial        设置该属性为它的默认值。

inherit        从父元素继承该属性。

。。。。。。

CSS flex-flow 属性

默认值：row nowrap

继承：否

可动画化：否。

版本：CSS3

JavaScript 语法：object.style.flexFlow="column nowrap"

定义和用法：

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。

语法：flex-flow: flex-direction flex-wrap|initial|inherit;

属性值：

值         描述

flex-direction可能的值：

row

row-reverse

column

column-reverse

initial

inherit

默认值是 "row"。

规定灵活项目的方向。

flex-wrap可能的值：

nowrap

wrap

wrap-reverse

initial

inherit

默认值是 "nowrap"。

规定灵活项目是否拆行或拆列。

initial设置该属性为它的默认值。

inherit从父元素继承该属性。

。。。。。。

CSS flex-grow 属性

默认值：

继承：否

可动画化：是。

版本：CSS3

JavaScript 语法：object.style.flexGrow="5"

定义和用法：

flex-grow 属性用于设置或检索弹性盒的扩展比率。

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

语法：flex-grow: number|initial|inherit;

属性值：

值            描述

number一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

initial    设置该属性为它的默认值。

inherit    从父元素继承该属性。

。。。。。。

CSS flex-shrink 属性

默认值：1

继承：否

可动画化：是。

版本：CSS3

JavaScript 语法：object.style.flexShrink="5"

定义和用法：

flex-shrink 属性用于设置或检索弹性盒的收缩比率。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

语法：flex-shrink: number|initial|inherit;

属性值：

值            描述

number一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。

initial    设置该属性为它的默认值。

inherit    从父元素继承该属性。

。。。。。。

CSS flex-wrap 属性

默认值：nowrap

继承：否

可动画化：否。

版本：CSS3

JavaScript 语法：object.style.flexWrap="nowrap"

定义和用法：

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。

注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。

语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值：

值            描述

nowrap默认值。规定灵活的项目不拆行或不拆列。

wrap    规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

initial    设置该属性为它的默认值。

inherit    从父元素继承该属性。

。。。。。。

CSS float 属性

默认值：none

继承：no

版本：CSS1

JavaScript 语法：object.style.cssFloat="left"

属性定义及使用说明：

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！

属性值：

值        描述

left    元素向左浮动。

right    元素向右浮动。

none默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit规定应该从父元素继承 float 属性的值。

。。。。。。

CSS font 属性

默认值：not specified

继承：yes

版本：CSS1

JavaScript 语法：object.style.font="italic small-caps bold 12px arial,sans-serif"

属性定义及使用说明：

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

注意： line - height属性设置行与行之间的空间。

Font 特性：

值                            描述

font-style                规定字体样式。

font-variant            规定字体异体。

font-weight            规定字体粗细。

font-size/line-height规定字体尺寸和行高。

font-family            规定字体系列。

caption                定义被标题控件（比如按钮、下拉列表等）使用的字体。

icon                        定义被图标标记使用的字体。

menu                    定义被下拉列表使用的字体。

message-box        定义被对话框使用的字体。

small-caption        caption 字体的小型版本。

status-bar            定义被窗口状态栏使用的字体。

。。。。。。

CSS3 @font-face 规则

。。。。。。

CSS font-family 属性

默认值：没有指定

继承：是

版本：CSS1

JavaScript 语法：object.style.fontFamily="arial,sans-serif"

属性定义及使用说明：

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

有两种类型的字体系列名称：

family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。

generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

注意： 每个值用逗号分开。

注意: 如果字体名称包含空格，它必须加上引号。在HTML中使用"style"属性时，必须使用单引号。

属性值：

值        描述

family-name

generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。

inherit 规定应该从父元素继承字体系列。

。。。。。。

CSS font-size 属性

默认值：medium

继承：yes

版本：CSS1

JavaScript 语法：object.style.fontSize="larger"

属性定义及使用说明：

font-size属性设置字体大小。

属性值：

值                     描述

xx-small

x-small

small

medium            把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。

large

x-large

xx-large

smaller            把 font-size 设置为比父元素更小的尺寸。

larger            把 font-size 设置为比父元素更大的尺寸。

length            把 font-size 设置为一个固定的值。

%                    把 font-size 设置为基于父元素的一个百分比值。

inherit            规定应该从父元素继承字体尺寸。

。。。。。。

CSS font-size-adjust 属性

默认值：none

继承性：yes

版本：CSS2

JavaScript 语法：object.style.fontSizeAdjust="0.70"

定义和用法：

font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

说明：字体的小写字母"x"的高度与"font-size"高度之间的比率被称为一个字体的aspect值。当字体拥有高的aspect值时，那么当此字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

可能的值：

值           描述

none   默认。如果此字体不可用，则不保持此字体的 x-height。

number  定义字体的 aspect 值比率。

可使用的公式：首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸

举例：如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

浏览器支持：

Internet Explorer 不支持 font-size-adjust 属性。

。。。。。。

CSS font-stretch 属性

默认值：normal

继承性：yes

版本：CSS2

JavaScript 语法：object.style.fontStretch="ultra-expanded"

定义和用法：

font-stretch 属性可对当前的 font-family 进行伸缩变形。

可能的值：

值            描述

normal    默认值。把缩放比例设置为标准。

wider    把伸展比例设置为更进一步的伸展值

narrower把收缩比例设置为更进一步的收缩值

ultra-condensed

extra-condensed

condensed

semi-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

设置 font-family 的缩放比例。"ultra-condensed" 是最宽的值，而 "ultra-expanded" 是最窄的值。

浏览器支持：

所有主流浏览器都不支持 font-stretch 属性。

。。。。。。

CSS font-style 属性

默认值：normal

继承：yes

版本：CSS1

JavaScript 语法：object.style.fontStyle="italic"

属性定义及使用说明：

font-style属性指定文本的字体样式。

属性值：

值            描述

normal    默认值。浏览器显示一个标准的字体样式。

italic        浏览器会显示一个斜体的字体样式。

oblique浏览器会显示一个倾斜的字体样式。

inherit    规定应该从父元素继承字体样式。

。。。。。。

CSS font-variant 属性

默认值：normal

继承：yes

版本：CSS1

JavaScript 语法：object.style.fontVariant="small-caps"

属性定义及使用说明：

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

font-variant 属性主要用于定义小型大写字母文本。

属性值：

值                描述

normal        默认值。浏览器会显示一个标准的字体。

small-caps浏览器会显示小型大写字母的字体。

inherit        规定应该从父元素继承 font-variant 属性的值。

。。。。。。

CSS font-weight 属性

默认值：normal

继承：yes

版本：CSS1

JavaScript 语法：object.style.fontWeight="900"

属性定义及使用说明：

font-weight 属性设置文本的粗细

属性值：

值            描述

normal    默认值。定义标准的字符。

bold定    义粗体字符。

bolder   定义更粗的字符。

lighter   定义更细的字符。

100

200

300

400

500

600

700

800

900

定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

inherit规定应该从父元素继承字体的粗细。

。。。。。。

CSS3 grid-columns 属性

默认值：none

继承：no

版本：CSS3

JavaScript 语法：object.style.gridColumns="50% * * 200px"

属性定义及使用说明：

grid-columns属性指定网格中的每一列的宽度。

提示: 使用网格系统对于打印设计师来说具有巨大的价值。现在相同的改变被应用到在线内容上。网格属性提供了在可伸缩网格中调整标题、文本和图片尺寸和位置的能力。

语法：grid-columns: length|%|none|inherit;

属性值：

值         描述

length参考包含块的网格。

%        参考包含块的宽度。

none

inherit

浏览器支持：

目前没有主流浏览器支持grid-columns属性。

。。。。。。

CSS3 grid-rows 属性

默认值：none

继承：no

版本：CSS3

JavaScript 语法：object.style.gridRows="100px (30px 60px)"

属性定义及使用说明：

grid-rows属性指定在网格中的每一行的高度。

提示: 使用网格系统对于打印设计师来说具有巨大的价值。现在相同的改变被应用到在线内容上。网格属性提供了在可伸缩网格中调整标题、文本和图片尺寸和位置的能力。

语法：grid-rows: length|%|none|inherit;

属性值：

值        描述

length参考包含块的网格。

%        参考包含块的高度。

none

inherit

浏览器支持：

目前所有主流浏览器都不支持支持grid-rows属性。

。。。。。。

CSS3 hanging-punctuation 属性

默认值：none

继承性：yes

版本：CSS3

JavaScript 语法：object.style.hangingPunctuation="first"

定义和用法：

hanging-punctuation 属性规定把标点符号放在文本整行的开头还是结尾的行框之外。

语法：hanging-punctuation: none|first|last|allow-end|force-end;

属性值：

值        描述

none不在文本整行的开头还是结尾的行框之外放置标签符号。

first    标点附着在首行开始边缘之外。

last    标点附着在首行结尾边缘之外。

allow-end

force-end

浏览器支持：

目前主流浏览器都不支持 hanging-punctuation 属性。

。。。。。。

CSS height 属性

默认值：auto

继承：no

版本：CSS1

JavaScript 语法：object.style.height="50px"

属性定义及使用说明：

height属性设置元素的高度。

注意： height属性不包括填充，边框，或页边距！

属性值：

值        描述

auto    默认。浏览器会计算出实际的高度。

length  使用 px、cm 等单位定义高度。

%        基于包含它的块级对象的百分比高度。

inherit规定应该从父元素继承 height 属性的值。

。。。。。。

CSS3 icon 属性

默认值：auto

继承：no

版本：CSS3

JavaScript 语法：object.style.icon="url(image.png)"

属性定义及使用说明：

icon 属性为创作者提供了将元素设置为图标等价物的能力。

注意：元素的图标是不可使用，除非"content"属性设置为"icon"！

语法：icon: auto|URL|inherit;

值       描述

auto   使用由浏览器提供的默认通用图标。

URL   引用列表中的一个或多个图标，列表用逗号分隔。

inherit规定应从元素继承 icon 属性的值。

浏览器支持：

没有主流浏览器支持icon属性。

。。。。。。

CSS justify-content 属性

默认值：flex-start

继承：否

可动画化：否。

版本：CSS3

JavaScript 语法：object.style.justifyContent="space-between"

定义和用法：

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

语法：justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值：

值            描述

flex-start默认值。项目位于容器的开头。

flex-end项目位于容器的结尾。

center    项目位于容器的中心。

space-between项目位于各行之间留有空白的容器内。

space-around项目位于各行之前、之间、之后都留有空白的容器内。

initial     设置该属性为它的默认值。

inherit     从父元素继承该属性。

。。。。。。

CSS3 @keyframes 规则

定义和用法：

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法：@keyframes animationname {keyframes-selector {css-styles;}}

属性值：

值                            描述

animationname    必需。定义动画的名称。

keyframes-selector必需。动画时长的百分比。 

                                                      合法的值：

                                                       0-100%

                                                       from（与 0% 相同）

                                                       to（与 100% 相同）

css-styles                 必需。一个或多个合法的 CSS 样式属性。

浏览器支持：

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

。。。。。。

CSS left 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.left="50px"

属性定义及使用说明：

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。

注意： 如果“position:static”，左属性无效

属性值：

值        描述

auto    默认值。通过浏览器计算左边缘的位置。

%        设置以包含元素的百分比计的左边位置。可使用负值。

length使用 px、cm 等单位设置元素的左边位置。可使用负值。

inherit规定应该从父元素继承 left 属性的值。

。。。。。。

CSS letter-spacing 属性

默认值：normal

继承：yes

版本：CSS1

JavaScript 语法：object.style.letterSpacing="3px"

属性定义及使用说明：

letter-spacing 属性增加或减少字符间的空白（字符间距）

属性值：

值          描述

normal  默认。规定字符间没有额外的空间。

length  定义字符间的固定空间（允许使用负值）。

inherit  规定应该从父元素继承 letter-spacing 属性的值。

。。。。。。

CSS line-height 属性

默认值：normal

继承：是

版本：CSS1

JavaScript 语法：object.style.lineHeight="2"

属性定义及使用说明：

设置以百分比计的行高。

注意： 负值是不允许的。

属性值：

值            描述

normal    默认。设置合理的行间距。

number   设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

length   设置固定的行间距。

%           基于当前字体尺寸的百分比行间距。

inherit   规定应该从父元素继承 line-height 属性的值。

。。。。。。

CSS list-style 属性

默认值：disc outside none

继承：是

版本：CSS1

JavaScript 语法：object.style.listStyle="decimal inside"

属性定义及使用说明：

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

属性值：

值                            描述

list-style-type        设置列表项标记的类型。

list-style-position设置在何处放置列表项标记。

list-style-image    使用图像来替换列表项的标记。

initial                    将这个属性设置为默认值。

inherit                    规定应该从父元素继承 list-style 属性的值。

。。。。。。

CSS list-style-image 属性

默认值：none

继承：是

版本：CSS1

JavaScript 语法：object.style.listStyleImage="url('/images/blueball.gif')"

属性定义及使用说明：

list-style-image 属性使用图像来替换列表项的标记。

注意: 请始终规定一个 "list-style-type" 属性以防图像不可用。

属性值：

值        描述

URL    图像的路径。

none默认。无图形被显示。

inherit规定应该从父元素继承 list-style-image 属性的值。

。。。。。。

CSS list-style-position 属性

默认值：outside

继承：是

版本：CSS1

JavaScript 语法：object.style.listStylePosition="inside"

属性定义及使用说明：

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

Outside：

Coffee

Tea

Coca-cola

Inside：

Coffee

Tea

Coca-cola

属性值：

值          描述

inside  列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside  默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

inherit  规定应该从父元素继承 list-style-position 属性的值。

浏览器支持：

所有主流浏览器都支持list-style-position属性。

注意：IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

。。。。。。

CSS list-style-type 属性

默认值：小黑圆点

继承：是

版本：CSS1

JavaScript 语法：object.style.listStyleType="square"

属性定义及使用说明：

list-style-type 属性设置列表项标记的类型。

属性值：

值        描述

none无标记。

disc    默认。标记是实心圆。

circle标记是空心圆。

square标记是实心方块。

decimal标记是数字。

decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)

lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-greek小写希腊字母(alpha, beta, gamma, 等。)

lower-latin小写拉丁字母(a, b, c, d, e, 等。)

upper-latin大写拉丁字母(A, B, C, D, E, 等。)

hebrew传统的希伯来编号方式

armenian传统的亚美尼亚编号方式

georgian传统的乔治亚编号方式(an, ban, gan, 等。)

cjk-ideographic简单的表意数字

hiragana标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）

katakana标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）

hiragana-iroha标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）

katakana-iroha标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

。。。。。。

CSS margin 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.margin="10px 5px"

属性定义及使用说明：

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例：

margin:10px 5px 15px 20px;

上边距是 10px

右边距是 5px

下边距是 15px

左边距是 20px

margin:10px 5px 15px;

上边距是 10px

右边距和左边距是 5px

下边距是 15px

margin:10px 5px;

上边距和下边距是 10px

右边距和左边距是 5px

margin:10px;

所有四个边距都是 10px

注意： 负值是允许的。

属性值：

值         描述

auto     浏览器计算外边距。

length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

%         规定基于父元素的宽度的百分比的外边距。

inherit 规定应该从父元素继承外边距。

。。。。。。

CSS margin-bottom 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.marginBottom="10px"

属性定义及使用说明：

margin-bottom属性设置元素的下边距。

注意： 负值是允许的。

属性值：

值        描述

auto    浏览器计算下外边距。

length规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。

%        规定基于父元素的宽度的百分比的下外边距。

inherit规定应该从父元素继承下外边距。

。。。。。。

CSS margin-left 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.marginLeft="10px"

属性定义及使用说明：

margin-left属性设置元素的左边距。

注意： 负值是允许的。

属性值：

值        描述

auto    浏览器设置的左外边距。

length定义固定的左外边距。默认值是0。

%        定义基于父对象总高度的百分比左外边距。

inherit规定应该从父元素继承左外边距。

。。。。。。

CSS margin-right 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.marginRight="10px"

属性定义及使用说明：

margin-right属性设置元素的右边距。

注意： 负值是允许的。

属性值：

值        描述

auto    浏览器设置的右外边距。

length定义固定的右外边距。默认值是 0。

%        定义基于父对象总高度的百分比右外边距。

inherit规定应该从父元素继承右外边距。

。。。。。。

CSS margin-top 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.marginTop="10px"

属性定义及使用说明：

margin-top属性设置元素的上部边距。

注意： 负值是允许的。

属性值：

值         描述

auto     浏览器设置的上外边距。

length 定义固定的上外边距。默认值是 0。

%         定义基于父对象总高度的百分比上外边距。

inherit 规定应该从父元素继承上外边距。

。。。。。。

CSS max-height 属性

默认值：none

继承：no

版本：CSS2

JavaScript 语法：object.style.maxHeight="10px"

属性定义及使用说明：

max-height 属性设置元素的最大高度。

注意： max-height属性不包括填充，边框，或页边距！

属性值：

值        描述

none默认。定义对元素被允许的最大高度没有限制。

length定义元素的最大高度值。

%        定义基于包含它的块级对象的百分比最大高度。

inherit规定应该从父元素继承 max-height 属性的值。

。。。。。。

CSS max-width 属性

默认值：none

继承：no

版本：CSS2

JavaScript 语法：object.style.maxWidth="100px"

属性定义及使用说明：

max-width属性设置元素的最大宽度。

注意： max-width属性不包括填充，边框，或页边距！

属性值：

值        描述

none默认。定义对元素的最大宽度没有限制。

length定义元素的最大宽度值。

%        定义基于包含它的块级对象的百分比最大宽度。

inherit规定应该从父元素继承 max-width 属性的值。

。。。。。。

CSS3 @media查询

定义和使用：

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：@media mediatype and|not|only (media feature) {   CSS-Code;   }

你也可以针对不同的媒体使用不同 stylesheets :<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型：

值        描述

all        用于所有设备

aural已废弃。用于语音和声音合成器

braille已废弃。 应用于盲文触摸式反馈设备

embossed已废弃。 用于打印的盲人印刷设备

handheld 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话

print     用于打印机和打印预览

projection已废弃。 用于投影设备

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

tty    已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备

tv        已废弃。 用于电视和网络电视

媒体功能：

值                描述

aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率

color        定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。

device-height定义输出设备的屏幕可见高度。

device-width定义输出设备的屏幕可见宽度。

grid            用来查询输出设备是否使用栅格或点阵。

height        定义输出设备中的页面可见区域高度。

max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。

max-color定义输出设备每一组彩色原件的最大个数。

max-color-index定义在输出设备的彩色查询表中的最大条目数。

max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。

max-device-height定义输出设备的屏幕可见的最大高度。

max-device-width定义输出设备的屏幕最大可见宽度。

max-height定义输出设备中的页面最大可见区域高度。

max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。

max-resolution定义设备的最大分辨率。

max-width定义输出设备中的页面最大可见区域宽度。

min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。

min-color定义输出设备每一组彩色原件的最小个数。

min-color-index定义在输出设备的彩色查询表中的最小条目数。

min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。

min-device-width定义输出设备的屏幕最小可见宽度。

min-device-height定义输出设备的屏幕的最小可见高度。

min-height定义输出设备中的页面最小可见区域高度。

min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数

min-resolution定义设备的最小分辨率。

min-width定义输出设备中的页面最小可见区域宽度。

monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0

orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。

resolution定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

scan定义电视类设备的扫描工序。

width定义输出设备中的页面可见区域宽度。

。。。。。。

CSS min-height 属性

默认值：

继承：否

版本：CSS2

JavaScript 语法：object.style.minHeight="10px"

属性定义及使用说明：

min-height 属性设置元素的最低高度。

注意： min-height属性不包括填充，边框，或页边距！

属性值：

值描述

length定义元素的最小高度。默认值是 0。

%        定义基于包含它的块级对象的百分比最小高度。

inherit规定应该从父元素继承 min-height 属性的值。

。。。。。。

CSS min-width 属性

默认值：

继承：no

版本：CSS2

JavaScript 语法：object.style.minWidth="10px"

属性定义及使用说明：

min-width属性设置元素的最小宽度。

注意： min-width属性不包括填充，边框，或页边距！

属性值：

值        描述

length定义元素的最小宽度值。默认值：取决于浏览器。

%        定义基于包含它的块级对象的百分比最小宽度。

inherit规定应该从父元素继承 min-width 属性的值。

。。。。。。

CSS3 nav-down 属性

默认值：auto

继承：no

版本：CSS3

JavaScript 语法：object.style.navDown="#div2"

属性定义及使用说明：

nav-down 属性规定当使用 nav-down 导航键时，向何处进行导航。

语法：nav-down: auto|id|target-name|inherit;

属性值：

值                 说明

auto             浏览器决定导航到哪个元素。

id                 规定被导航元素的 id。

target-name 规定被导航的目标框架。

inherit         规定应从父元素继承 nav-down 属性的值。

。。。。。。

CSS3 nav-index 属性

默认值：auto

继承：no

版本：CSS3

JavaScript 语法：object.style.navIndex=2

属性定义及使用说明：

nav-index属性指定了连续的导航元素的顺序（"Tab键顺序"）。

语法：nav-index: auto|number|inherit;

属性值：

值            说明

auto        浏览器指派的元素的Tab键顺序

number表示该元素的Tab键顺序。 1意味着首先

inherit    指定nav- index属性的值应该从父元素继承

。。。。。。

CSS3 nav-left 属性

默认值：auto

继承：no

版本：CSS3

JavaScript 语法：object.style.navLeft="#div2"

属性定义及使用说明：

nav-left的属性指定使用箭头向左导航键导航。

语法：nav-left: auto|id|target-name|inherit;

属性值：

值                  说明

auto              浏览器将决定哪个元素导航

id                  指定导航到该元素的ID

target-name  指定导航到目标帧

inherit          指定nav-left属性的值，应该从父元素继承

。。。。。。

CSS3 nav-right 属性

默认值：auto

继承性：no

版本：CSS3

JavaScript 语法：object.style.navRight="#div2"

定义和用法：

nav-right 属性规定当使用 nav-right 导航键时，向何处进行导航。

语法：nav-right: auto|id|target-name|inherit;

属性值：

值                 描述

auto             浏览器决定导航到哪个元素。

id                 规定被导航元素的 id。

target-name 规定被导航的目标框架。

inherit         规定应从父元素继承 nav-right 属性的值。

浏览器支持：

目前只有 Opera 支持 nav-right 属性。

。。。。。。

CSS3 nav-up 属性

默认值：auto

继承性：no

版本：CSS3

JavaScript 语法：object.style.navUp="#div2"

定义和用法：

nav-up 属性规定当使用 nav-up 导航键时，向何处进行导航。

语法：nav-up: auto|id|target-name|inherit;

属性值：

值                 描述

auto             浏览器决定导航到哪个元素。

id                 规定被导航元素的 id。

target-name 规定被导航的目标框架。

inherit         规定应从父元素继承 nav-up 属性的值。

浏览器支持：

目前只有 Opera 支持 nav-up 属性。

。。。。。。

CSS3 opacity 属性

默认值：1

继承：no

版本：CSS3

JavaScript 语法：object.style.opacity=0.5

属性定义及使用说明：

Opacity属性设置一个元素了透明度级别。

语法：opacity: value|inherit;

属性值：

值        描述

value指定不透明度。从0.0（完全透明）到1.0（完全不透明）

inheritOpacity属性的值应该从父元素继承

浏览器支持：

所有主流浏览器都支持opacity属性。

注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

。。。。。。

CSS order 属性

默认值：

继承：否

可动画化：是

版本：CSS3

JavaScript 语法：object.style.order="2"

定义和用法：

order 属性 设置或检索弹性盒模型对象的子元素出现的順序。。

注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。

语法：order: number|initial|inherit;

属性值：

值            描述

number默认值是 0。规定灵活项目的顺序。

initial    设置该属性为它的默认值。请参阅 initial。

inherit    从父元素继承该属性。请参阅 inherit。

。。。。。。

CSS outline 属性

默认值：转化没有介质

继承：no

版本：CSS2

JavaScript 语法：object.style.outline="#0000FF dotted thin"

属性定义及使用说明：

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

属性值：

值                    描述

outline-color规定边框的颜色。

outline-style规定边框的样式。

outline-width规定边框的宽度。

inherit            规定应该从父元素继承 outline 属性的设置。

。。。。。。

CSS outline-color 属性

默认值：invert

继承：no

版本：CSS2

JavaScript 语法：object.style.outlineColor="#00FF00"

属性定义及使用说明：

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-color属性指定轮廓颜色。

注意： 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

提示和注释：

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值：

值        描述

color指定轮廓颜色。

invert默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。

inherit规定应该从父元素继承轮廓颜色的设置。

。。。。。。

CSS3 outline-offset 属性

默认值：

继承：no

版本：CSS3

JavaScript 语法：object.style.outlineOffset="15px"

属性定义及使用说明：

outline-offset属性设置轮廓框架在 border 边缘外的偏移

Outlines在两个方面不同于边框：

Outlines 不占用空间

Outlines 可能非矩形

语法：outline-offset: length|inherit:

属性值：

值        描述

length轮廓与边框边缘的距离。

inherit规定应从父元素继承 outline-offset 属性的值。

。。。。。。

CSS outline-style 属性

默认值：none

继承：no

版本：CSS2

JavaScript 语法：object.style.outlineStyle="dotted"

属性定义及使用说明：

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-style属性指定outline的样式。

提示和注释：

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值：

值        描述

none默认。定义无轮廓。

dotted定义点状的轮廓。

dashed定义虚线轮廓。

solid    定义实线轮廓。

double定义双线轮廓。双线的宽度等同于 outline-width 的值。

groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。

ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。

inset    定义 3D 凹边轮廓。此效果取决于 outline-color 值。

outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。

inherit规定应该从父元素继承轮廓样式的设置。

。。。。。。

CSS Outline-width 属性

默认值：medium

继承：no

版本：CSS2

JavaScript 语法：object.style.outlineWidth="thin"

属性定义及使用说明：

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-width指定轮廓的宽度。

注意： 请始终在outline-wicth属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

提示和注释：

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值：

值         描述

thin     规定细轮廓。

medium默认。规定中等的轮廓。

thick规定粗的轮廓。

length允许您规定轮廓粗细的值。

inherit规定应该从父元素继承轮廓宽度的设置。

。。。。。。

CSS overflow 属性

默认值：visible

继承：no

版本：CSS2

JavaScript 语法：object.style.overflow="scroll"

属性定义及使用说明：

overflow属性指定如果内容溢出一个元素的框，会发生什么。

注意：在X Lion(Mac OS),滚动条显示默认是隐藏的,只有当被使用(即使"overflow:scroll"已设置)。

属性值：

值        描述

visible默认值。内容不会被修剪，会呈现在元素框之外。

hidden内容会被修剪，并且其余内容是不可见的。

scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承 overflow 属性的值。

。。。。。。

CSS3 overflow-x 属性

默认值：visible

继承性：no

版本：CSS3

JavaScript 语法：object.style.overflowX="scroll"

定义和用法：

overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-y 属性来确定对上/下边缘的裁剪。

语法：overflow-x: visible|hidden|scroll|auto|no-display|no-content;

属性值：

值                描述

visible        不裁剪内容，可能会显示在内容框之外。

hidden        裁剪内容 - 不提供滚动机制。

scroll        裁剪内容 - 提供滚动机制。

auto            如果溢出框，则应该提供滚动机制。

no-display如果内容不适合内容框，则删除整个框。

no-content如果内容不适合内容框，则隐藏整个内容。

浏览器支持：

所有主流浏览器都支持 overflow-x 属性。

注释：overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。

。。。。。。

CSS3 overflow-y 属性

默认值：visible

继承性：no

版本：CSS3

JavaScript 语法：object.style.overflowY="scroll"

定义和用法：

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-x 属性来确定对左/右边缘的裁剪。

语法：overflow-y: visible|hidden|scroll|auto|no-display|no-content;

属性值：

值                描述

visible        不裁剪内容，可能会显示在内容框之外。

hidden        裁剪内容 - 不提供滚动机制。

scroll        裁剪内容 - 提供滚动机制。

auto            如果溢出框，则应该提供滚动机制。

no-display如果内容不适合内容框，则删除整个框。

no-content如果内容不适合内容框，则隐藏整个内容。

浏览器支持：

所有主流浏览器都支持 overflow-y 属性。

注释：overflow-y 属性无法在 IE8 以及更早的浏览器正确地工作。

。。。。。。

CSS padding 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.padding="10px 5px"

属性定义及使用说明：

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例：

padding:10px 5px 15px 20px;

上填充是 10px

右填充是 5px

下填充是 15px

左填充是 20px

padding:10px 5px 15px;

上填充是 10px

右填充和左填充是 5px

下填充是 15px

padding:10px 5px;

上填充和下填充是 10px

右填充和左填充是 5px

padding:10px;

所有四个填充都是 10px

注意： 负值是不允许的。

属性值：

值        说明

length规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px

%        规定基于父元素的宽度的百分比的填充

inherit指定应该从父元素继承padding

。。。。。。

CSS Padding-bottom 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.paddingBottom="2cm"

属性定义及使用说明：

padding-bottom属性设置元素的底部内边距（底部空白）。

注意： 负值是不允许的。

属性值：

值        描述

length规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。

%        定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。

inherit规定应该从父元素继承下内边距。

。。。。。。

CSS padding-left 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.paddingLeft="2cm"

属性定义及使用说明：

padding-left属性设置一个元素的左内边距（空格）。

注意： 负值是不允许的。

属性值：

值        描述

length规定以具体单位计的固定的左内边距值，比如像素、厘米等。默认值是 0px。

%        定义基于父元素宽度的百分比左内边距。此值不会如预期地那样工作于所有的浏览器中。

inherit规定应该从父元素继承左内边距。

。。。。。。

CSS padding-right 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.paddingRight="2cm"

属性定义及使用说明：

padding-right属性设置一个元素的右内边距（空白）。

注意： 负值是不允许的。

属性值：

值        描述

length规定以具体单位计的固定的右内边距值，比如像素、厘米等。默认值是 0px。

%        定义基于父元素宽度的百分比右内边距。此值不会如预期地那样工作于所有的浏览器中。

inherit规定应该从父元素继承右内边距。

。。。。。。

CSS padding-top 属性

默认值：

继承：no

版本：CSS1

JavaScript 语法：object.style.paddingTop="2cm"

属性定义及使用说明：

padding-top属性设置一个元素的顶部内边距（空白）。

注意： 负值是不允许的。

属性值：

值        描述

length规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。

%        定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。

inherit规定应该从父元素继承上内边距。

。。。。。。

CSS Page-break-after 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.pageBreakAfter="always"

属性定义及使用说明：

page-break-after 属性设置元素后的 page-breaking 行为。

注意： 您不能对绝对定位的元素使用此属性。

注意： 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

属性值：

值              描述

auto默认。如果必要则在元素后插入分页符。

always      在元素后插入分页符。

avoid      避免在元素后插入分页符。

left          在元素之后足够的分页符，一直到一张空白的左页为止。

right          在元素之后足够的分页符，一直到一张空白的右页为止。

inherit      规定应该从父元素继承 page-break-after 属性的设置。

浏览器支持：

所有主要浏览器都支持page-break-after属性。

注意： 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。

注意： Firefox，Chrome和Safari不支持属性值"avoid"，"left"和"right"。.

。。。。。。

CSS page-break-before 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.pageBreakBefore="always"

属性定义及使用说明：

page-break-before 属性设置元素前的 page-breaking 行为。

注意： 您不能对绝对定位的元素使用此属性。

注意：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

属性值：

值        描述

auto    默认值。如果必要则在元素前插入分页符。

always在元素前插入分页符。

avoid避免在元素前插入分页符。

left    在元素之前足够的分页符，一直到一张空白的左页为止。

right    在元素之前足够的分页符，一直到一张空白的右页为止。

inherit规定应该从父元素继承 page-break-before 属性的设置。

浏览器支持：

所有主要浏览器都支持page-break-before属性。

注意： 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。

注意： Firefox,Chrome和Safari不支持属性值"avoid"，"left"和"right"。

。。。。。。

CSS page-break-inside 属性

默认值：auto

继承性：no

版本：CSS2

JavaScript 语法：object.style.pageBreakInside="avoid"

定义和用法：

page-break-inside 属性设置元素内部的 page-breaking 行为。

尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。

应用于：position 值为 relative 或 static 的非浮动块级元素。

注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

可能的值：

值        描述

auto    默认。如果必要则在元素内部插入分页符。

avoid避免在元素内部插入分页符。

inherit规定应该从父元素继承 page-break-inside 属性的设置。

浏览器支持：

只有 Opera 浏览器支持 page-break-inside 属性。

。。。。。。

CSS3 perspective 属性

默认值：none

继承性：是

版本：CSS3

JavaScript 语法：object.style.perspective=500

定义和用法：

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

语法：perspective: number|none;

属性值：

值            描述

number元素距离视图的距离，以像素计。

none      默认值。与 0 相同。不设置透视。

浏览器支持：

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

。。。。。。

CSS3 perspective-origin 属性

默认值：50% 50%

继承：no

版本：CSS3

JavaScript 语法：object.style.perspectiveOrigin="10% 10%"

属性定义及使用说明：

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

注意： 对于Chrome和Safari用户：为了更好地理解perspective属性!

语法：perspective-origin: x-axis y-axis;

值        描述

x-axis定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

left

center

right

length

%

y-axis定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

top

center

bottom

length

%

。。。。。。

CSS position 属性

默认值：static

继承：no

版本：CSS2

JavaScript 语法：object.style.position="absolute"

属性定义及使用说明：

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

属性值：

值            描述

absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed    生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit    规定应该从父元素继承 position 属性的值。

。。。。。。

CSS3 punctuation-trim 属性

默认值：none

继承：yes

版本：CSS3

JavaScript 语法：object.style.punctuationTrim="start"

属性定义及使用说明：

punctuation-trim属性指定是否应修饰，当它出现在一条线，或相邻的另一个全形标点符号字符开头或结束标点字符。

语法：punctuation-trim: none|start|end|allow-end|adjacent;

属性值：

值        说明

none请勿修剪打开或关闭标点符号

start    在每一行的开头放置开头标点符号

end    在每一行的末尾修剪结束标点符号

allow-end如果另有不适合之前的理由，修剪每行末尾的结束标点符号。

adjacent 若以前相邻字符修剪开口punctuation是一个全形开口，中间或结束标点符号，或表意文字空间。修剪结束标点符号，如果下一个相邻的字符是一个全形关闭或中间punctuation，或表意文字空间。

浏览器支持：

任何主流浏览器都不支持punctuation-trim属性。

。。。。。。

CSS quotes 属性

默认值：not specified

继承：yes

版本：CSS2

JavaScript 语法：object.style.quotes="none"

属性定义及使用说明：

quotes属性设置嵌套引用的引号类型。

属性值：

值        描述

none规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。

string string string string    定义要使用的引号。前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。

inherit规定应该从父元素继承 quotes 属性的值。

引号字符：

效果说明                 实体编号

"    双引号                 "

'    单引号                 '

?    单一的左尖括号    ?

?    单一的右尖括号    ?

?    双的左尖括号    ?

?    双的右尖括号    ?

'    左引号(单 high-6)‘

'    右引号(单 high-9)’

"    左引号(双 high-6)“

"    右引号(双 high-9)”

?    双引号 (双 low-9)?

浏览器支持：

所有主流浏览器都支持quotes属性。

注意：IE8需要定义！DOCTYPE才支持quotes属性。

。。。。。。

CSS3 resize 属性

默认值：none

继承：no

版本：CSS3

JavaScript 语法：object.style.resize="both"

属性定义及使用说明：

resize属性指定一个元素是否是由用户调整大小的。

注意：resize属性适用于计算其他元素的溢出值是不是"visible"。

语法：resize: none|both|horizontal|vertical:

属性值：

值                描述

none        用户无法调整元素的尺寸。

both        用户可调整元素的高度和宽度。

horizontal用户可调整元素的宽度。

vertical    用户可调整元素的高度。

浏览器支持：

注意: Firefox, Safari,和 Chrome 兼容 resize 属性

。。。。。。

CSS right 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.right="50px"

属性定义及使用说明：

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义元素，left 的计算值始终等于 right。

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

注意： 如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。

属性值：

值        描述

auto    默认值。通过浏览器计算右边缘的位置。

%        设置以包含元素的百分比计的右边位置。可使用负值。

length使用 px、cm 等单位设置元素的右边位置。可使用负值。

inherit规定应该从父元素继承 right 属性的值。

。。。。。。

CSS3 rotation 属性

默认值：

继承性：no

版本：CSS3

JavaScript 语法：object.style.rotation="180deg"

定义和用法：

rotation 属性围绕由 rotation-point 属性定义的指定点，对块级元素进行逆时针旋转。

提示：边框、内边距、内容以及背景（非固定）也会被旋转！

语法：rotation: angle;

值        描述

angle元素旋转角度。可能的值：0deg 到 360deg。

浏览器支持：

目前没有浏览器支持 rotation 属性。

。。。。。。

CSS tab-size 属性

默认值：8

继承：是

可动画化：否

版本：CSS3

JavaScript 语法：object.style.tabSize="16"

定义和用法：

tab-size 属性规定制表符（tab）字符的空格长度。

在 HTML 中，制表符（tab）字符通常显示为一个单一的空格字符，除了一些元素，比如 <textarea> 和 <pre>，tab-size 属性的结果只对这些元素有效。

CSS 语法：tab-size: number|length|initial|inherit;

属性值：

值        描述

number 默认值是 8。规定每个制表符（tab）字符要显示的空格字符的数量。

length规定制表符（tab）字符的长度。几乎所有的主流浏览器都不支持该属性值。 

initial设置该属性为它的默认值。

inherit从父元素继承该属性。

浏览器支持：

目前只有 Chrome 支持 tab-size 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-tab-size 属性。

Opera 支持另一个可替代该属性的属性，即 -o-tab-size 属性。

目前没有浏览器支持该值作为长度单位。

。。。。。。

CSS table-layout 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.tableLayout="fixed"

属性定义及使用说明：

table-layout属性为表设置表格布局算法。

属性值：

值        描述

auto    默认。列宽度由单元格内容设定。

fixed列宽由表格宽度和列宽度设定。

inherit规定应该从父元素继承 table-layout 属性的值。

浏览器支持：

所有主流浏览器都支持table-layout属性。

注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

。。。。。。

CSS3 target 属性

默认值：current window above

继承性：no

版本：CSS3

JavaScript 语法：object.style.target="new front"

定义和用法：

target 属性是一个简写属性，用于设置以下属性：

target-name

target-new

target-position

语法：target: target-name target-new target-position;

属性值：

值                     描述

target-name 规定在何处打开超链接（target destination）。

target-new     规定应该在新窗口或已有窗口的新标签页中打开超链接。

target-position 规定在何处放置新的目的地链接。

浏览器支持：

目前没有浏览器支持 target。

。。。。。。

CSS3 target-name 属性

默认值：current

继承性：no

版本：CSS3

JavaScript 语法：object.style.targetName="new"

定义和用法：

target-name 属性规定在何处打开超链接 (target destination)。

语法：target-name: current|root|parent|new|modal|name;

值        描述

current在链接所在的框架、标签页或窗口中打开超链接。

root    在当前标签页或窗口中超链接。

parent在父框架中打开超链接。如果当前框架没有父框架，则将该值视作 root。

new    创建新的目的地（参阅 target-new）。

modal在新的（暂时创建的）模态窗口中打开新窗口。

name在已有框架、窗口或标签页中打开链接。如果 name 目的地不存在，则用该名称创建新的目的地。

浏览器支持：

目前没有浏览器支持 target-name。

。。。。。。

CSS3 target-new 属性

默认值：window

继承性：no

版本：CSS3

JavaScript 语法：object.style.targetNew="tab"

定义和用法：

target-new 属性规定在新窗口还是新标签页或已有窗口中打开新的目的地链接。

注释：target-new 属性只有在 target-name 属性创建新标签页或新窗口时有效。

语法：target-new: window|tab|none;

值            描述

window在新窗口中打开超链接。

tab        在已有窗口的新标签页中打开超链接。

none    不创建新的目的地。

浏览器支持：

目前没有浏览器支持 target-new。

。。。。。。

CSS3 target-position 属性

默认值：above

继承性：no

版本：CSS3

JavaScript 语法：object.style.targetPosition="front"

定义和用法：

target-position 属性规定在何处放置新的目的地链接。

注释：target-position 属性只有在 target-name 属性创建新标签页或新窗口时有效。

语法：target-position: above|behind|front|back;

值        描述

above在当前标签页/窗口之前放置新的目的地标签页/窗口。

behind在当前标签页/窗口之后放置新的目的地标签页/窗口。

front在所有其他标签页/窗口之前放置新的目的地标签页/窗口。

back    在所有其他标签页/窗口之后放置新的目的地标签页/窗口。

浏览器支持：

目前没有浏览器支持 target-position。

。。。。。。

CSS text-align 属性

默认值：如果方向是ltr，则向左，如果方向是rtl，则向右

继承：是

版本：CSS1

JavaScript 语法：object.style.textAlign="right"

属性定义及使用说明：

text-align属性指定元素文本的水平对齐方式。

属性值：

值        描述

left    把文本排列到左边。默认值：由浏览器决定。

right    把文本排列到右边。

center把文本排列到中间。

justify实现两端对齐文本效果。

inherit规定应该从父元素继承 text-align 属性的值。

。。。。。。

CSS text-align-last 属性

默认值：auto

继承：是

可动画化：否

版本：CSS3

JavaScript 语法：object.style.textAlignLast="right"

定义和用法：

text-align-last 属性规定如何对齐文本的最后一行。

注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

语法：text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

属性值：

值         描述

auto     默认值。最后一行被调整，并向左对齐。

left    最后一行向左对齐。

right最后一行向右对齐。

center最后一行居中对齐。

justify最后一行被调整为两端对齐。

start    最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。

end    最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。

initial设置该属性为它的默认值。

inherit从父元素继承该属性。

浏览器支持：

只有 Internet Explorer 支持 text-align-last 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。

Internet Explorer 不支持 "start" 和 "end" 值。

。。。。。。

CSS text-decoration 属性

默认值：none

继承：no

版本：CSS1

JavaScript 语法：object.style.textDecoration="overline"

属性定义及使用说明：

text-decoration 属性规定添加到文本的修饰。

注意： 修饰的颜色由 "color" 属性设置。

属性值：

值            描述

none    默认。定义标准的文本。

underline定义文本下的一条线。

overline定义文本上的一条线。

line-through定义穿过文本下的一条线。

blink    定义闪烁的文本。

inherit    规定应该从父元素继承 text-decoration 属性的值。

。。。。。。

CSS text-decoration-color 属性

默认值：currentColor

继承：否

可动画化：是

版本：CSS3

JavaScript 语法：object.style.textDecorationColor="red"

定义和用法：

text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

注意：只有在带有可见的 text-decoration 的元素上，text-decoration-color 属性才起作用。

语法：text-decoration-color: color|initial|inherit;

属性值：

值        描述

color规定文本修饰的颜色。

initial设置该属性为它的默认值。

inherit从父元素继承该属性。

浏览器支持：

几乎所有的主流浏览器都不支持 text-decoration-color 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。

。。。。。。

CSS text-decoration-line 属性

默认值：none

继承：否

可动画化：否

版本：CSS3

JavaScript 语法：object.style.textDecorationLine="overline"

定义和用法：

text-decoration-line 属性规定文本修饰要使用的线条类型。

注意：您也可以使用 text-decoration 属性设置 text-decoration-line。text-decoration 属性是 text-decoration-line、text-decoration-style 和 text-decoration-color 属性的速记属性。

注意：您也可以同时使用多个值，比如 underline 和 overline，来在文本的上方和下方都显示线条。

语法：text-decoration-line: none|underline|overline|line-through|initial|inherit;

属性值：

值            描述

none    默认值。规定文本修饰没有线条。

underline规定文本的下方将显示一条线。

overline规定文本的上方将显示一条线。

line-through规定文本的中间将显示一条线。

initial    设置该属性为它的默认值。

inherit    从父元素继承该属性。

浏览器支持：

几乎所有的主流浏览器都不支持 text-decoration-line 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-line 属性。

。。。。。。

CSS text-decoration-style 属性

默认值：solid

继承：否

可动画化：否

版本：CSS3

JavaScript 语法：object.style.textDecorationStyle="wavy"

定义和用法：

text-decoration-style 属性规定线条如何显示。

语法：text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

属性值：

值         描述

solid     默认值。线条将显示为单线。

double 线条将显示为双线。

dotted 线条将显示为点状线。

dashed 线条将显示为虚线。

wavy 线条将显示为波浪线。

initial 设置该属性为它的默认值。

inherit 从父元素继承该属性。

浏览器支持：

几乎所有的主流浏览器都不支持 text-decoration-style 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-style 属性。

。。。。。。

CSS text-indent 属性

默认值：

继承：yes

版本：CSS1

JavaScript 语法：object.style.textIndent="50px"

属性定义及使用说明：

text-indent 属性规定文本块中首行文本的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

属性值：

值        描述

length定义固定的缩进。默认值：0。

%        定义基于父元素宽度的百分比的缩进。

inherit规定应该从父元素继承 text-indent 属性的值。

。。。。。。

CSS3 text-justify 属性

默认值：auto

继承：yes

版本：CSS3

JavaScript 语法：object.style.textJustify="inter-word"

属性定义及使用说明：

text-justify属性指定文本对齐设置为"justify"的理据。

此属性指定应怎样对齐文本以及对齐间距。

语法：text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

属性值：

值                    描述

auto                浏览器决定齐行算法。

none            禁用齐行。

inter-word    增加/减少单词间的间隔。

inter-ideograph用表意文本来排齐内容。

inter-cluster    只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。

distribute        类似报纸版面，除了在东亚语系中最后一行是不齐行的。

kashida        通过拉伸字符来排齐内容。

。。。。。。

CSS3 text-outline 属性

默认值：none

继承：yes

版本：CSS3

JavaScript 语法：object.style.textOutline="2px 2px #ff0000"

属性定义及使用说明：

text-outline属性指定文字大纲。

语法：text-outline: thickness blur color;

属性值：

值             描述

thickness必需。轮廓的粗细。

blur        可选。轮廓的模糊半径。

color    必需。轮廓的颜色。

浏览器支持：

任何主流浏览器都不支持text-outline属性。

。。。。。。

CSS3 text-overflow 属性

默认值：clip

继承：no

版本：CSS3

JavaScript 语法：object.style.textOverflow="ellipsis"

属性定义及使用说明：

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

语法：text-overflow: clip|ellipsis|string;

属性值：

值        描述

clip    修剪文本。

ellipsis显示省略符号来代表被修剪的文本。

string使用给定的字符串来代表被修剪的文本。

。。。。。。

CSS3 text-shadow 属性

默认值：none

继承性：yes

版本：CSS3

JavaScript 语法：object.style.textShadow="2px 2px #ff0000"

定义和用法：

text-shadow 属性向文本设置阴影。

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

语法：text-shadow: h-shadow v-shadow blur color;

属性值：

值                描述

h-shadow必需。水平阴影的位置。允许负值。

v-shadow    必需。垂直阴影的位置。允许负值。

blur            可选。模糊的距离。

color        可选。阴影的颜色。

浏览器支持：

所有主流浏览器都支持 text-shadow 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

。。。。。。

CSS text-transform 属性

默认值：none

继承：yes

版本：CSS1

JavaScript 语法：object.style.textTransform="uppercase"

属性定义及使用说明：

text-transform 属性控制文本的大小写。

属性值：

值                描述

none        默认。定义带有小写字母和大写字母的标准的文本。

capitalize    文本中的每个单词以大写字母开头。

uppercase定义仅有大写字母。

lowercase定义无大写字母，仅有小写字母。

inherit        规定应该从父元素继承 text-transform 属性的值。

。。。。。。

CSS3 text-wrap 属性

默认值：normal

继承性：yes

版本：CSS3

JavaScript 语法：object.style.textWrap="none"

定义和用法：

text-wrap 属性规定文本的换行（折行）规则。

语法：text-wrap: normal|none|unrestricted|suppress;

属性值：

值            描述

normal    只在允许的换行点进行换行。

none    不换行。元素无法容纳的文本会溢出。

unrestricted在任意两个字符间换行。

suppress压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

浏览器支持：

目前主流浏览器都不支持 text-wrap 属性。

。。。。。。

CSS top 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.top="50px"

属性定义及使用说明：

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

注意： 如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

属性值：

值         描述

auto     默认值。通过浏览器计算上边缘的位置。

%         设置以包含元素的百分比计的上边位置。可使用负值。

length使用 px、cm 等单位设置元素的上边位置。可使用负值。

inherit规定应该从父元素继承 top 属性的值。

。。。。。。

CSS3 transform 属性

默认值：none

继承：no

版本：CSS3

JavaScript 语法：object.style.transform="rotate(7deg)"

属性定义及使用说明：

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法：transform: none|transform-functions;

属性值：

值                   描述

none           定义不进行转换。

matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y)定义 2D 转换。

translate3d(x,y,z)定义 3D 转换。

translateX(x)定义转换，只是用 X 轴的值。

translateY(y)定义转换，只是用 Y 轴的值。

translateZ(z)定义 3D 转换，只是用 Z 轴的值。

scale(x[,y]?)    定义 2D 缩放转换。

scale3d(x,y,z)定义 3D 缩放转换。

scaleX(x)        通过设置 X 轴的值来定义缩放转换。

scaleY(y)        通过设置 Y 轴的值来定义缩放转换。

scaleZ(z)        通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle)定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle)定义 3D 旋转。

rotateX(angle)定义沿着 X 轴的 3D 旋转。 

rotateY(angle)定义沿着 Y 轴的 3D 旋转。

rotateZ(angle)定义沿着 Z 轴的 3D 旋转。

skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle)定义沿着 X 轴的 2D 倾斜转换。

skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。

perspective(n)为 3D 转换元素定义透视视图。

。。。。。。

CSS3 transform-origin 属性

默认值：50% 50% 0

继承：no

版本：CSS3

JavaScript 语法：object.style.transformOrigin="20% 40%"

属性定义及使用说明：

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

注意： 使用此属性必须先使用transform 属性。

语法：transform-origin: x-axis y-axis z-axis;

属性值：

值        描述

x-axis定义视图被置于 X 轴的何处。可能的值：

left

center

right

length

%

y-axis定义视图被置于 Y 轴的何处。可能的值：

top

center

bottom

length

%

z-axis定义视图被置于 Z 轴的何处。可能的值：

length

。。。。。。

CSS3 transform-style 属性

默认值：flat

继承：no

版本：CSS3

JavaScript 语法：object.style.transformStyle="preserve-3d"

属性定义及使用说明：

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

注意： 使用此属性必须先使用transform 属性。

语法：transform-style: flat|preserve-3d;

属性值：

值                 描述

flat            子元素将不保留其 3D 位置。

preserve-3d子元素将保留其 3D 位置。

。。。。。。

CSS3 transition 属性

默认值：all 0 ease 0

继承性：no

版本：CSS3

JavaScript 语法：object.style.transition="width 2s"

定义和用法：

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property

transition-duration

transition-timing-function

transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

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

属性值：

值                            描述

transition-property规定设置过渡效果的 CSS 属性的名称。

transition-duration规定完成过渡效果需要多少秒或毫秒。

transition-timing-function规定速度效果的速度曲线。

transition-delay    定义过渡效果何时开始。

浏览器支持：

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

。。。。。。

CSS3 transition-delay 属性

默认值：

继承性：no

版本：CSS3

JavaScript 语法：object.style.transitionDelay="2s"

定义和用法：

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

语法：transition-delay: time;

值     描述

time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

浏览器支持：

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。

Safari 支持替代的 -webkit-transition-delay 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。

。。。。。。

CSS3 transition-duration 属性

默认值：

继承：no

版本：CSS3

JavaScript 语法：object.style.transitionDuration="5s"

属性定义及使用说明：

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

语法：transition-duration: time;

属性值：

值    描述

time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

。。。。。。

CSS3 transition-property 属性

默认值：all

继承：no

版本：CSS3

JavaScript 语法：object.style.transitionProperty="width,height"

属性定义及使用说明：

transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。

提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。

注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

语法：transition-property: none|all| property;

值            描述

none    没有属性会获得过渡效果。

all            所有属性都将获得过渡效果。

property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

。。。。。。

CSS3 transition-timing-function 属性

默认值：ease

继承：no

版本：CSS3

JavaScript 语法：object.style.transitionTimingFunction="linear"

属性定义及使用说明：

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果，以改变其持续时间的速度。

语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值：

值             描述

linear     规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease         规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in     规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

。。。。。。

CSS unicode-bidi 属性

默认值：normal

继承：是

可动画化：否

版本：CSS2

JavaScript 语法：object.style.unicodeBidi="bidi-override"

定义和用法：

unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。

语法：unicode-bidi: normal|embed|bidi-override|initial|inherit;

属性值：

值         描述

normal 默认。不使用附加的嵌入层面。

embed 创建一个附加的嵌入层面。

bidi-override创建一个附加的嵌入层面。重新排序取决于 direction 属性。

initial 设置该属性为它的默认值。

inherit 从父元素继承该属性。

。。。。。。

CSS vertical-align 属性

默认值：baseline

继承：no

版本：CSS1

JavaScript 语法：object.style.verticalAlign="bottom"

属性定义及使用说明：

vertical-align属性设置一个元素的垂直对齐。

属性值：

值             描述

baseline 默认。元素放置在父元素的基线上。

sub         垂直对齐文本的下标。

super     垂直对齐文本的上标

top         把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle     把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom把元素的底端与父元素字体的底端对齐。

length 

%             使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit     规定应该从父元素继承 vertical-align 属性的值。

。。。。。。

CSS visibility 属性

默认值：visible

继承：yes

版本：CSS2

JavaScript 语法：object.style.visibility="hidden"

属性定义及使用说明：

visibility属性指定一个元素是否是可见的。

提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

属性值：

值             描述

visible     默认值。元素是可见的。

hidden     元素是不可见的。

collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

inherit     规定应该从父元素继承 visibility 属性的值。

浏览器支持：

所有主流浏览器都支持visibility属性。

注意： ：Internet Explorer（包括IE8）没有版本支持属性值"inherit"或"collapse"。

。。。。。。

CSS width 属性

默认值：auto

继承：no

版本：CSS1

JavaScript 语法：object.style.width="50px"

属性定义及使用说明：

width属性设置元素的宽度。

注意： width属性不包括填充，边框和页边距！

属性值：

值         描述

auto     默认值。浏览器可计算出实际的宽度。

length 使用 px、cm 等单位定义宽度。

%         定义基于包含块（父元素）宽度的百分比宽度。

inherit 规定应该从父元素继承 width 属性的值。

。。。。。。

CSS white-space 属性

默认值：normal

继承：yes

版本：CSS1

JavaScript 语法：object.style.whiteSpace="pre"

属性定义及使用说明：

white-space属性指定元素内的空白怎样处理。

属性值：

值            描述

normal    默认。空白会被浏览器忽略。

pre        空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap保留空白符序列，但是正常地进行换行。

pre-line合并空白符序列，但是保留换行符。

inherit    规定应该从父元素继承 white-space 属性的值。

。。。。。。

CSS3 border-image-width 属性

默认值:1

继承:no

版本:CSS3

JavaScript 语法:object.style.borderImageWidth="30 30"

属性定义及使用说明：

border-image -width属性指定图像边界的宽度。

注意：border-image-width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

语法：border-image-width: number|%|auto;

属性值：

值            说明

number表示相应的border-width 的倍数

%            边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积

auto        如果指定了，宽度是相应的image slice的内在宽度或高度

。。。。。。

CSS3 word-break 属性

默认值：normal

继承性：yes

版本：CSS3

JavaScript 语法：object.style.wordBreak="keep-all"

定义和用法：

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

语法：word-break: normal|break-all|keep-all;

属性值：

值            描述

normal    使用浏览器默认的换行规则。

break-all允许在单词内换行。

keep-all只能在半角空格或连字符处换行。

浏览器支持：

所有主流浏览器都支持 word-break 属性。

。。。。。。

CSS word-spacing 属性

默认值：normal

继承：yes

版本：CSS1

JavaScript 语法：object.style.wordSpacing="10px"

属性定义及使用说明：

word-spacing属性增加或减少字与字之间的空白。

注意： 负值是允许的。

属性值：

值        描述

normal默认。定义单词间的标准空间。

length定义单词间的固定空间。

inherit规定应该从父元素继承 word-spacing 属性的值。

。。。。。。

CSS3 word-wrap 属性

默认值：normal

继承：是

版本：CSS3

JavaScript 语法：object.style.wordWrap="break-word"

属性定义及使用说明：

word-wrap属性允许长的内容可以自动换行。

语法：word-wrap: normal|break-word;

属性值：

值                描述

normal        只在允许的断字点换行（浏览器保持默认处理）。

break-word在长单词或 URL 地址内部进行换行。

。。。。。。

CSS z-index 属性

默认值：auto

继承：no

版本：CSS2

JavaScript 语法：object.style.zIndex="1"

属性定义及使用说明：

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

属性值：

值           描述

auto       默认。堆叠顺序与父元素相等。

number  设置元素的堆叠顺序。

inherit   规定应该从父元素继承 z-index 属性的值。

。。。。。。

一共201个属性。

“CSS中的所有属性的详细介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！