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中的所有屬性的詳細介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！