|
二、利用Text Rotation來(lái)實(shí)現(xiàn)
Jonathan Snook 在他的文章《Text Rotation with CSS》中提到用Text Rotation來(lái)實(shí)現(xiàn)這種效果。這里對(duì)其作簡(jiǎn)要的描述。
如今，很多主流的瀏覽器如Webkit和Firefox(從3.5開(kāi)始)都支持旋轉(zhuǎn)HTML元素。那么要使其垂直排列，就可以利用該屬性。但須為每種瀏覽器加上前綴。
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
對(duì)于IE瀏覽器，可以使用一個(gè)稱(chēng)之為BasicImage 的濾鏡來(lái)達(dá)到目的，該濾鏡能夠旋轉(zhuǎn)任何具有l(wèi)ayout屬性的元素。但字體較之于使用圖片來(lái)說(shuō)，并不顯得平滑。
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
該濾鏡可以接受四個(gè)屬性值0、1、2、3，其對(duì)應(yīng)旋轉(zhuǎn)的角度分別為0、90、180、270。盡管它還具有mirroring、masking、greyscale 等屬性，但在此對(duì)我毫無(wú)意義。
在Jonathan Snook的這篇文章的留言中，Ashish 提到在IE中使用css的一個(gè)屬性writing-mode:tb-rl可以得到同樣的效果，本人做過(guò)測(cè)試，的確可以使文本垂直排列。但與旋轉(zhuǎn)文本略有不同，主要體現(xiàn)在文字起始的方向上。另外，本人在IEtest中測(cè)試IE8，使用BasicImage好像不能生效。
查查示例
三、總結(jié)
對(duì)比兩種方法。很明顯，第一種方法無(wú)論是瀏覽器支持上還是視覺(jué)效果的美觀上都強(qiáng)于第二種，唯一感到不足的是css代碼較長(zhǎng)。第二種方法雖不甚完美，但其實(shí)現(xiàn)過(guò)程并不復(fù)雜，不需要任何圖片，但作為一種開(kāi)拓思路的嘗試也未嘗不可。
本文鏈接：http://m.95time.cn/tech/web/2009/6968.asp 
出處：
責(zé)任編輯：bluehearts
上一頁(yè) 日期垂直排列的兩種技巧 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 日期垂直排列的兩種技巧 [2]
