css背景-邊框-文本
阿新 • • 發佈:2017-08-07
對齊方式 mat ren nbsp demo ava borde 影響 pre
一、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不支持
-
值:
- padding-box:默認值,從padding區域(含padding)開始顯示背景圖像
- border-box:從border區域(含border)開始顯示背景圖像
-
content-box:從content(文字)區域開始顯示背景圖像
- eg:background:url("../../dist/images/avatar.jpg") no-repeat;
background-origin:padding-box
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
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
-
border-bottom-left-radius
3.盒子陰影
box-shadow
- 可以同時設置多組陰影,每組參數值用逗號分隔
- 值none:沒有陰影
box-shadow:水平 垂直 模糊度(必須寫在顏色前面) 陰影外延寬度 顏色 內陰影(inset)默認為外陰影
4.圖片邊框
border-image
- 復合屬性,設置或檢索對象的邊框樣式使用圖像來填充
border-image-source
- 設置或檢索對象的邊框樣式使用圖像路徑
- 值url
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.盒子倒影
box-reflect
- 只有谷歌可以用,加私有前綴
-webkit-
- IE Firefox不支持
-
-webkit-box-reflect:none|direction offset 遮罩
-
direction值:above below left right
-
offset值:
- length長度表示,來定義倒影與對象之間的間隔,可以為負值
- percentage:用百分比來定義倒影與對象之間的間隔。可以為負值
-
遮罩值
- none:無遮罩圖像
- URL:指定遮罩圖像
- linear-gradient:使用線性漸變創建遮罩圖像
- radial-gradient:使用徑向漸變創建遮罩圖像
- repeating-linear-gradient:使用重復的線性漸變創建背遮罩像。
- repeating-radial-gradient:使用重復的徑向漸變創建 eg:background:url("../../dist/images/2.jpg"); background-size:100% 100%; -webkit-box-reflect:below 3px -webkit-linear-gradient(transparent, #fff);
-
三、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屬性值;
-
值:
- normal:依照亞洲語言和非亞洲語言的文本規則,允許在字內換行。
- keep-all:亞洲文本不斷行,英文也不斷行,與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。
-
break-all:亞洲文本和英文都斷行,該行為與亞洲語言的normal相同。也允許非亞洲語言文本行內的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本,比如使連續的英文字母間斷開。
對比: word-wrap:單詞太長會提前換行 word-break:單詞太長不會提前換行,而是在超出範圍時,把單詞截斷換行
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
- 檢索或設置對象中的制表符的長度
- Firefox4~40 Chrome21+ Safari6.1+ Opera支持
-
該屬性決定了制表符(U+0009)的寬度,整數代表空格(U+0020)的倍數
- 如:tab-size:4(表示制表符寬度是4個空格的寬度)
-
只有當white-space的屬性值為:pre|pre-wrap時,該屬性的定義才有效
- integer:用整數指定制表符的長度。不允許負值
- length:用長度值指定制表符的長度。不允許負值
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背景-邊框-文本