css3學習 理論之文字

2022-04-22 20:16:36 字數 1125 閱讀 3955

1. text-shadow,在css3中被重新定義,增加了不透明度效果。

例如:text-shadow: 1px 1px 1px #333;第乙個值表示水平偏移,第二個值表示垂直偏移,第三個值表示模糊半徑(可選),第四個值表示陰影的顏色(可選)。

還可以接受乙個以逗號分隔的陰影效果列表。

例如:text-shadow: 0.2em 0.5em 0.1em #600,

-0.3em 0.1em 0.1em #060,

0.6em -0.3em 0.1em #006

2. text-overflow,溢位文字省略,屬性值可以是clip,ellipsis,ellipsis-eord,意思分別是 剪下,顯示省略標記放在 最後乙個字元的位置,顯示省略標記放在 最後乙個詞的位置。

要想實現這種效果,還需要在定義兩個樣式:white-space:nowrap; over-flow:hidden;第乙個強制文字在一行內顯示,第二個表示溢位內容隱藏。

例如:white-space:nowrap; over-flow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;/*相容opera*/-moz-binding:url('ellipsis.xml#ellipsis');/*相容firefox*/

3. word-wrap,文字換行,值可以是noraml,break-word(內容將在邊界內換行)。

4. text-align,值可以是start,end,left,right,center,justify,;start 和 end主要是針對行內元素的,在包含元素的頭部或者尾部顯示,而string則是主要應用於**單元格中,將根據某個指定的字元進行對齊。

5. text-align-last,最後一行文字的對齊方式,值可以是start,end,left,right,center,justify

其他的還有很多,這裡只列舉出來,不做詳細解釋了。

white-space-collapse,white-space,word-break,text-wrap,text-justify,word-spacing,letter-spacing,punctuation-trim,text-emphasis,text-outline,text-indent,hanging-punctuation

css3學習 理論之漸變

下面來一起學習下css3的漸變,激動人心啊,終於可以不用來做漸變背景了。webkit和gecko引擎對於css3的漸變實現有一定的差異,只能分開學習。一 webkit webkit gradient stop 引數說明 定義漸變型別,包括線性漸變 linear 和徑向漸變 radial 定義漸變起始...

css3學習 理論之彈性盒模型

彈性盒模型,該模型用於決定元素在盒子中的分布方式以及如何處理盒子的可用空間。有了他,咱們就可以輕鬆建立自適應瀏覽器視窗的流動布局或者自適應字型大小的彈性布局。其屬性有 box align,定義子元素在盒子內垂直方向上的空間分配方式。box pack,定義子元素在盒子內水平方向上的空間分配方式。box...

css3學習 理論之多列布局

例子 columns 250px 3 250px表示的是列寬,3表示的是多列的數目。也可以只指定列寬,column width 300px moz column width 300px webkit column width 300px 網頁中每個欄目的最大寬度為300畫素 根據視窗寬度自動調整幾欄...