這篇文章主要介紹“CSS3中的隱藏特性有哪些”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“CSS3中的隱藏特性有哪些”文章能幫助大家解決問題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、桑植網(wǎng)站維護(hù)、網(wǎng)站推廣。

CSS3為web設(shè)計增添了許多令人驚嘆的特性，這其中你經(jīng)常會用到box-shadow（圖層陰影），border-radius（邊框圓角），transform（變形）這一類受歡迎的常用特性。但是還有一些強(qiáng)大的功能，你可能沒有接觸到，它們就象是埋藏在地下的寶藏，靜靜等待著你的發(fā)掘。

W3C正不斷致力于為設(shè)計師、開發(fā)人員和用戶開發(fā)新的CSS特性，下面我們就來看看你可能不知道的CSS3中的10個隱藏特性：

大多數(shù)代碼編輯器配有Tab尺寸控制，開發(fā)者可以對指定代碼的縮進(jìn)所使用的Tab鍵的寬度進(jìn)行控制。而現(xiàn)在，這個功能已經(jīng)對嵌入在網(wǎng)頁的定制代碼開放了。

注意，每個瀏覽器可能都有對Tab占用寬度的不同說明。所以，我們在不同的瀏覽器上會看到一些差異。我目前所知道的支持這個功能的瀏覽器包括：Chrome，Opera，F(xiàn)irefox和Safari。

文本渲染的特性可以讓瀏覽器知道如何在網(wǎng)頁中渲染文本。文本優(yōu)化所涉及的性能、易讀性、精度將會決定到文本的質(zhì)量。看看下面截圖兩個版本的字距調(diào)整，來辨別一下“正常”版和“易讀性優(yōu)化”版的差別吧。

除了常規(guī)的正常，粗體和斜體，其它的字體設(shè)置也會提供不一樣的感官設(shè)計。Helvetica Neue或者M(jìn)yriad Pro字體就是其中的例子，對于字體的伸縮程度，它們有“Condensed”，“Ultra-condensed”，和“Semi-condensed”幾種設(shè)置，這些都可以通過一個名為font-stretch（字體伸縮）的特性來實(shí)現(xiàn)。

我們可以使用字體伸縮結(jié)合文字特性（比如使用字體樣式），舉一個例子：

font-stretch（字體伸縮）特性目前只能在Firefox和Internet Explorer 9（及以上版本）使用。

文字溢出特性指定了容器中溢出或者被截斷內(nèi)容的呈現(xiàn)方式。默認(rèn)的處理方式是截斷，被截斷的內(nèi)容會被隱藏起來。你可以設(shè)置用省略號來代表被截斷的文本或者進(jìn)行省略。如下圖所示：

正如你所想的，末尾三個點(diǎn)的省略號代表了被省略的內(nèi)容。

并不是每一種語言都是從左到右的書寫的，有一些語言是從上到下的比如日語，還有一些語言是從右到左的比如阿拉伯語和希伯來語。

為了適應(yīng)這些語言，CSS引入了名為書寫模式的新特性來幫助開發(fā)人員改變內(nèi)容的書寫方向。例如，這個代碼片斷就是讓本文書寫的內(nèi)容保持從左到右的順序（無論什么語言）

改變文本內(nèi)容的順序?yàn)閺纳系较拢@可以通過設(shè)置為vertical-l,r來實(shí)現(xiàn)：

pointer-events（指針事件）屬性可以讓開發(fā)人員控制鼠標(biāo)指針在拖下，懸停和點(diǎn)擊等事件下的行為。使用下圖的命令后，指針點(diǎn)擊鏈接將不會產(chǎn)生任何效果，鏈接會被完全禁用，而href標(biāo)簽中所指定的地址位置也會成為擺設(shè)。

關(guān)于指針事件的一些關(guān)鍵問題將會在下一個版本CSS4中得到解決。

在Photoshop等圖片編輯器里，你可以通過旋轉(zhuǎn)或翻轉(zhuǎn)等改變圖片的方向。現(xiàn)在，CSS3中的image-orientation（圖片定向）功能可以讓你可以對網(wǎng)頁上的圖片完成同樣的處理。這里是一個如何讓圖片進(jìn)行水平翻轉(zhuǎn)的例子：

你可以通過恢復(fù)鏡像（from-image）來保留原來圖片的方向：

類似于文本渲染特性，圖像渲染定義了網(wǎng)頁上的圖片質(zhì)量，特別是可改變圖片的大小。這個特性是由一堆數(shù)值組成的，不同的瀏覽器對于這些數(shù)值的設(shè)定都不一樣。比如，crisp-edges這個用于保存圖片對比度并可預(yù)防圖片邊緣模糊的特性在Chrome極速瀏覽器里會使用webkit-optimize-contrast，而在IE瀏覽器里會使用nearest-neighbor。

這是一項實(shí)驗(yàn)性技術(shù)，實(shí)施得到的結(jié)果有隨著技術(shù)的不同而產(chǎn)生微小的變化。

列屬性可以使開發(fā)者輕松的把web內(nèi)容排列成列，我們把內(nèi)容分成兩列，如下所示：

當(dāng)瀏覽器支持這個特性的時候，比如在Chrome和Safari中，我們就會看到以下內(nèi)容的排列：

CSS這個特性上再加上一些創(chuàng)造力，你就可以輕松的創(chuàng)建一個與時尚雜志相似的擁有靈活流體布局和誘人內(nèi)容布局的網(wǎng)站了。

flex的特性旨在構(gòu)建更加無縫化的響應(yīng)式網(wǎng)格并同時解決關(guān)于主流網(wǎng)絡(luò)布局使用浮動屬性所產(chǎn)生的一系列問題。除此之外，使用flex特性，網(wǎng)絡(luò)布局將完全延伸至整個容器，這在以前是一件相當(dāng)煩瑣的事情。

現(xiàn)在，假如你想要構(gòu)建一個三列的web布局，你可以這樣安排：

然后，使用flex構(gòu)建列屬性，像這樣操作：

附加字體和背景顏色的裝飾，我們將得到以下結(jié)果：

關(guān)于“CSS3中的隱藏特性有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

文章題目：CSS3中的隱藏特性有哪些
文章出自：http://chinadenli.net/article10/ppeigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站設(shè)計公司、動態(tài)網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)