標籤：bsp sha web through 其他 預設 stroke ios visible
一、CSS3背景屬性列表
- background
- background-color
- background-image
- background-repeat
- background-attatchment
- background-position
- background-origin
- background-clip
- background-size
1.CSS3背景原點屬性
background-origin- 設定或檢索對象的背景映像計算
background-position時的參考原點位置
- IE8 Firefox3.5不支援
值：
2.CSS3裁切屬性
background-clip- 設定對象的背景映像向外裁剪的地區
- IE8 Firefox3.5不支援
- 值：
- padding-box:從padding地區（不含padding）開始向外裁剪背景。
- border-box:預設值,從border地區（不含border）開始向外裁剪背景
- content-box:從content地區開始向外裁剪背景
- text:
加私人首碼-webkit-從前景內容的形狀（比如文章）作為裁剪地區向外裁剪，如此即可實現使用背景作為填充色之類的遮罩效果(圖片顯示在文字上,需要設color:transparent)
3.CSS3背景尺寸屬性
background-size- 檢索或設定對象的背景映像的尺寸大小
- 如果提供兩個，第一個用於定義背景映像的寬度，第二個用於定義背景映像的高度。
- 如果只提供一個，該值將用於定義背景映像的寬度，第2個值預設為auto,即高度為auto,此時背景圖以提供的寬度作為參照來進行等比縮放
- 值：
- length:用長度值指定背景映像大小。不允許負值。
- percentage：用百分比指定背景映像大小。不允許負值。
- auto:背景映像的真實大小
- cover:將背景映像等比縮放到完全覆蓋容器，背景映像有可能超出容器
- contain:將背景映像等比縮放到寬度或高度與容器的寬度或高度相等，背景映像始終被包含在容器內。
4.CSS3多背景屬性
- background：
值：
background-image:url("../../dist/images/bg-tl.png"), url("../../dist/images/bg-tr.png"), url("../../dist/images/bg-bl.png"), url("../../dist/images/bg-br.png");background-repeat:no-repeat;background-position:0px 0px, 100% 0px, 0px 100%, 100% 100%;background: url("../../dist/images/bg-tl.png") no-repeat 0px 0px, url("../../dist/images/bg-tr.png") no-repeat 100% 0px, url("../../dist/images/bg-bl.png") no-repeat 0px 100%, url("../../dist/images/bg-br.png") no-repeat 100% 100%;
二、CSS3邊框1.直角邊框
border- border-width
- border-style
- border-color
- border-left
- border-right
- border-top
- border-bottom2.圓角邊框
border-radius
3.盒子陰影
box-shadow- 可以同時設定多組陰影，每組參數值用逗號分隔
- 值none:沒有陰影
box-shadow：水平 垂直 模糊度（必須寫在顏色前面） 陰影外延寬度 顏色 內陰影（inset）預設為外陰影
4.圖片邊框
border-image
border-image-source
border-image-slice
- 設定或檢索對象的邊框背景圖的分割方式（設定的是每個角）
- 值：浮點數/百分比
border-image-width
- 設定或檢索對象的邊框厚度
- 值：長度值/百分比/浮點數
border-image-outset
- 設定或檢索對象的邊框背景圖的擴充，往外蔓延,不佔用位置
- 長度值/浮點數（不允許負值）
border-image-repeat
- 設定或檢索對象的邊框映像的平鋪方式
- 值
- stretch:指定用展開方式來填充邊框背景圖（預設值）
- repeat:指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷
- round:指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框
- space:指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。 綜合寫：border-image:source slice/width/outset repeat 例如： border-image-slice:27; border-image-repeat:space; border-image:url("imgs/avatar.jpg") 33%/50px/10px stretch;
border-colors
5.盒子倒影
三、CSS3文本1.CSS3文本陰影屬性
text-shadow- 設定或檢索對象中文本的文字是否有陰影及模糊效果，參考box-shadow屬性
- 可以設定多組效果，每組參數值以
逗號分隔。多組陰影特殊效果，Demo:火焰文字，霓虹文字
- IE6~9 Firefox不支援，
text-shadow:none|長度1 長度2 長度3 color
- none：不設定陰影
- 長度1：設定對象的陰影水平位移值。可以為負值
- 長度2：設定對象的陰影垂直位移量。可以為負值
- 長度3：設定對象的陰影模糊值。
不允許負值
- color:對象的陰影顏色 例如： text-shadow:1px 0px 0px rgb(188,188,188), 2px 0px 0px rgb(177,177,177), 3px 0px 0px rgb(166,166,166), 4px 0px 0px rgb(155,155,155), 5px 0px 0px rgb(144,144,144);
2.CSS3溢出文字屬性
text-overflow- 當塊容器overflow為非visible時，定義內聯內容溢出其塊容器是否截斷或者添加
...及自訂字元
- IE6~9 Firefox不支援
- 值：
clip：預設值，當內聯內容溢出塊容器時，將溢出部分裁切掉ellipsis:當內聯內容溢出塊容器時，將溢出部分替換為...
- 要使得text-overflow有效，必須有以下前提條件:
- 1.overflow:hidden;
- 2.white-space:nowrap;
- 3.width為非auto值 例如： p:nth-of-type(6){ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
3.CSS3文本換行
word-wrap
- 設定或檢索當內容超出指定容器的邊界時是否換行
- CSS3將word-wrap改名為
overflow-wrap
- 值：
- normal:允許內容頂開或溢出指定的容器邊界
- break-word:內容將在邊界內換行。如果需要，單詞內部允許斷行
word-break
- 設定或檢索對象內文本的字內換行行為
- 對於解決防止頁面中出現連續無意義的長字元打破布局，應該使用break-all屬性值；
值：
white-space
- 設定或檢索對象內空格的處理方式
- 值：
- normal：預設處理方式
- pre:用等寬字型顯示預先格式化的文本，不合并文字間的空白距離，當文字超出邊界時不換行
- nowrap:強制在同一行內顯示所有文本，合并文本間的多餘空白，直到文本結束或者遭遇br對象
- pre-wrap:用等寬字型顯示預先格式化的文本，不合并文字間的
空白距離，當文字碰到邊界時發生換行
- pre-line:保持文本的換行，
不保留文字間的空白距離，當文字碰到邊界時發生換行
4.CSS3文本裝飾
text-decoration
text-decoration-line
- 值：
- none:指定文字無裝飾
- underline:指定文字的裝飾是底線
- overline:指定文字的裝飾是上劃線
- line-through:指定文字的裝飾是貫穿線
- blink:指定文字的裝飾是閃爍
text-decoration-style
- 文本裝飾線條的形狀
- 值：
- solid：實線
- double：雙線
- dotted：點狀線
- dashed：虛線
- wavy：波浪線
text-decoration-color
text-decoration-skip
text-underline-position
5.CSS3文本描邊（僅Webkit）
text-fill-color
text-stroke
- 指定文字的描邊
- text-stroke：width||color
text-strokw-width
text-stroke-color
6.其他文字屬性
text-transform
- 設定或檢索對象中的文本的大小寫
- IE6~11 Firefox2~18 Chrome4~45 Safari6~8 Opera15~29不支援
- 值
- none：無轉換
- capitalize：將每個單詞的第一個字母轉換成大寫
- uppercse：將每個單詞轉換成大寫
- lowercase：將每個單詞轉換成小寫
- full-width：將所有字元轉換成fullwidth形式。如果字元沒有相應的fullwidth形式，將保留原樣
tab-size
text-align
- 設定或檢索對象中內容的水平對齊
- 區塊層級元素的文本是一些堆疊的線框
- 大部分瀏覽器要使得text-align的justify左右對齊生效，需要在漢字間插入有空白，如空格
- 快內的最後一行文本，及被強制打斷的行，其左右對齊需使用text-align-last
- IE瀏覽器下，如果text-align-last要生效，必須先定義text-align為justify
- 值：
- left:內容靠左對齊
- center:置中對齊
- right:靠右對齊
- justify:（瀏覽器不支援）左右對齊，但對於被強制打斷的行及最後一行，包括僅有一行文本的情況，不做處理。
- start:內容對齊開始邊界
- end:內容對齊結束邊界
- match-parent：（瀏覽器不支援）這個值和inherit表現一致，只是該值繼承的start或end關鍵字是針對父母的direction值並計算的，計算值可以是left和right
- justify-all:效果等同於justify,但還會讓最後一行也左右對齊，
text-align-last
- 只有TE6.0+ Firefox12~37支援
- 設定或檢索一個塊內的最後一行（包括塊內僅有一行文本的情況，這時既是第一行也是最後一行）或者被強制打斷的行的對齊
text-justify
- 設定或檢索對象內調整文本使用的對齊
- 只有IE6~11支援
- 因為這個屬性影響文本布局，所以text-align必須被設定為justify
text-size-adjust
- 檢索或設定移動端頁面中對象文本的大小調整
- 該屬性只在行動裝置上生效
- 只有iOS Safari支援
- 如果頁面沒有定義meta viewport ,此屬性定義無效
- 值：
- auto:文字大小根據裝置尺寸進行調整
- none:文字大小不會根據裝置尺寸進行調整·
- percentage:用百分比來指定文字大小在裝置尺寸不同的情況下如何調整。
css背景-邊框-文本
