CSS3中與文字相關的樣式

2022-08-21 07:15:14 字數 1110 閱讀 9309

1.給文字新增陰影:text-shadow屬性(特別指出ie瀏覽器要ie10+的版本才支援)

語法如下:

text-shadow:length length length color;
其中,第乙個引數length表示陰影離開文字的橫向距離,為必需引數,該值為正時, 陰影在文字的右方,該值為負時,陰影在文字的左方;第二個引數length表示陰影離開文字 的縱向距離,為必需引數,該值為正時,陰影在文字的下方,該值為負時,陰影在文字上方 ;第三個length表示陰影的模糊半徑,模糊半徑為可選引數,預設值為0,數值越大,陰影越模糊;color表示陰影的顏色。

這是乙個測試

上例中給文字指定了向左10px,向下10px,模糊半徑為15px的紅色陰影,chrome瀏覽器中的效果如下:

也可以給文字指定多個陰影,並且每個陰影顏色可以不同,在指定時對多個陰影用逗號隔開,

這是乙個測試

chrome瀏覽器中的效果如下:

2.使用伺服器端字型:web font與@font-face屬性

可以使用@font-face屬性來利用伺服器端字型,用法:

@font-face
font-family的值webfont用來宣告使用伺服器端字型,src路徑指明伺服器端字型檔案所在的路徑,format宣告字型檔案的格式,可以省略。在ie中只能使用微軟自帶的embedded opentype字型檔案,擴充套件名為「.eot」。

3.讓文字自動換行:word-break屬性

用法: 

word-break有三個取值:

normal:表示使用瀏覽器預設的換行規則;

keep-all:只能在半形空格或連字元處換行;

break-all:允許在單詞內換行。

用法:

div

CSS3文字與字型相關樣式

1 功能 給頁面上的文字新增陰影效果。2 使用方法 text shadow length length length color 陰影離開文字的橫方向距離 縱方向距離 陰影的模糊半徑 陰影的顏色 注意 陰影離開文字的橫方向距離 縱方向距離 必須指定,可指定負值。陰影的模糊半徑 代表陰影向外模糊時的模...

CSS3 文字與字型相關樣式

給文字新增陰影 text shadow屬性text shadow length length length color前三個length分別指陰影離開文字橫向距離 縱向距離 這兩個引數允許值為負 和模糊半徑 值越大模糊範圍越大,預設為0,不模糊 color指定陰影的顏色 div讓文字換行 很多瀏覽器...

css3之布局相關的樣式

本篇主要講布局相關的樣式。1 多欄布局。在css3之前,若要實現分欄的效果,可以使用浮動 float 來實現。但是這樣會有乙個缺點就是,分欄時造成分欄的幾個欄不能對齊。而在css3中,可以通過column count屬性來進行多欄布局,這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。使用方法 c...