此文為譯文，作者在這篇文章中提到了12條我們前端人員在日常工作中不是特別熟悉而又確實(shí)可以使用或者瀏覽器是可以很好支持的CSS技巧，熟知這些點(diǎn)，對(duì)我們深入研究CSS有很好的幫助。

       鑒于本人英語(yǔ)水平有限，有些地方的翻譯可能不是特別準(zhǔn)確，或者不是很容易理解，在譯文中，我也用括號(hào)的方式加了一些簡(jiǎn)單的算是注釋的個(gè)人理解。各位讀者也可以結(jié)合著原文去閱讀，以便更好地理解作者所表達(dá)的意思！

       原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/

       翻譯：TGideas--johnsqliu

-----------------------------------------------------------------------------------------------

        一年前我發(fā)表了《12條鮮有人知的css的事實(shí)》，到今天為止，它已成為站點(diǎn)里最受歡迎的文章。那篇文章發(fā)表到現(xiàn)在，我已經(jīng)為新的文章收集了更多css小技巧。我們都知道，所有成功的電影都應(yīng)該催生出一部時(shí)髦的續(xù)集，對(duì)吧？

圖片來(lái)自站點(diǎn)/Natalia Balska

      接下來(lái)，我們馬上進(jìn)入今年的開發(fā)者十二條。我能肯定的是，大部分人對(duì)這些多少都有些了解，但你們也可以在評(píng)論中讓我知道哪些對(duì)你來(lái)說(shuō)是陌生的。

1、 border-radius屬性可以使用'/'（斜杠）標(biāo)簽 

      這是我四年以前在我的站點(diǎn)寫的一些東西，但也行有些新手包括有經(jīng)驗(yàn)的開發(fā)者，還是不太熟悉這些特性。

      不管你信不信，下邊是有效的border-radius代碼:

.box {
 border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;}

      如果你之前沒有見過這些，這里你可能會(huì)有一些困惑，所以這里有規(guī)范的解釋：

     “如果斜杠/前后都設(shè)了值，那么斜杠前面的值就設(shè)定橫向的圓角半徑值，而斜杠后面的值就是設(shè)定縱向的半徑值。如果沒有斜杠的話，就把橫向跟縱向的值設(shè)定為相等?！?/span>

     規(guī)范還提供了下面的圖：

圖片注釋：“border-top-left-radius: 55pt 25pt 的兩個(gè)值定義了這個(gè)圓角的曲率（彎曲度） ”

      所以，斜杠在值中的作用是讓你創(chuàng)建不對(duì)稱（橫向跟縱向值）的圓角曲率。如果你想更詳細(xì)地了解這些，請(qǐng)查看我上面原文的鏈接，或者，可以試一下MDN提供的方便互動(dòng)的例子：

      很多border-radius 生成器都是不允許你去設(shè)置這些項(xiàng)的值。這個(gè)MDN生成器是我發(fā)現(xiàn)的唯一 一個(gè)可以讓你去修改的這些值的生成器。

2、使用bolder、lighter相關(guān)關(guān)鍵字進(jìn)行font-weight屬性的定義

     正常來(lái)說(shuō)你所看到的font-weight 屬性的定義，它的值要么是normal要么是bold。你也偶爾能看到整數(shù)以整百為增量的值：100,200、、最大到900.

     然而，bolder跟lighter這兩個(gè)值經(jīng)常會(huì)被忘記。

     根據(jù)規(guī)范定義，這兩個(gè)關(guān)鍵詞指定了比繼承值更粗或更細(xì)的值。它的出現(xiàn)會(huì)讓你在處理一個(gè)比簡(jiǎn)單的‘bold’更粗一點(diǎn)或者比正常文 本更細(xì)一點(diǎn)的多種權(quán)重的字號(hào)的時(shí)候表現(xiàn)的更加明顯。（這塊可能會(huì)有點(diǎn)難理解，其實(shí)這里是跟字體本身有關(guān)聯(lián)的，如果你的字體，比如例子中用到的‘Exo 2’字體中，因?yàn)檫@個(gè)字體最細(xì)為100，bolder一下就變成400，再bolder一下是700，其實(shí)它這個(gè)bolder跟lighter是有個(gè)固定跳到的數(shù)值的，只會(huì)匹配到400,700,900這樣的值里，當(dāng)你的繼承值為100、200或300，bolder一下，這個(gè)bolder的值都會(huì)是400，繼承值為900,800，lighter一下，這個(gè)值都一樣會(huì)是700，所以兩個(gè)關(guān)鍵字其實(shí)是只會(huì)是400、700、900三個(gè)值的）

      請(qǐng)看下邊CodePen 的demo：

     在這個(gè)實(shí)例中，我使用的是一個(gè)有18款不同樣式的Exo 2字體。我的demo中只使用了非斜體樣式，這對(duì)整百為單位的字號(hào)權(quán)重來(lái)說(shuō)已經(jīng)足夠了。

     這個(gè)實(shí)例包含了12層擁有不同font-weight 值的‘box’元素，引入‘bolder’和‘lighter’以便你能了解到字體的權(quán)重在不同的上下文繼承中有什么樣的效果。下面是實(shí)例中的CSS。注意代碼中的注釋，以及記住每一個(gè)后面的‘box’都是嵌套在前一層里面的。

.box {
 font-weight: 100;}.box-2 {
 font-weight: bolder; /* maps to 400 */}.box-3 {
 font-weight: bolder; /* maps to 700 */}.box-4 {
 font-weight: 400;}.box-5 {
 font-weight: bolder; /* maps to 700 */}.box-6 {
 font-weight: bolder; /* maps to 900 */}.box-7 {
 font-weight: 700;}.box-8 {
 font-weight: bolder; /* maps to 900 */}.box-9 {
 font-weight: bolder; /* maps to 900 */}.box-10 {
 font-weight: lighter; /* maps to 700 */}.box-11 {
 font-weight: lighter; /* maps to 400 */}.box-12 {
 font-weight: lighter; /* maps to 100 */}

     在這個(gè)案例中，‘bolder’和‘lighter’關(guān)鍵詞只會(huì)匹配到100,400,700和900的值。九種不同的狀態(tài)，這兩個(gè)關(guān)鍵詞都不會(huì)匹配到200,300,500,600和800的值。

     這是因?yàn)槟愀嬖V瀏覽器在‘bold’和‘light’中去選擇接下來(lái)的權(quán)重。所以它不會(huì)選擇成最大或最小的權(quán)重，而是僅僅根據(jù)它所繼承的選擇一個(gè)相對(duì)粗或細(xì)一點(diǎn)的權(quán)重。但是，如果字體的最低權(quán)重是300（比如 Open Sans這個(gè)字體），而且上下文繼承值是400，那么‘lighter’的值就會(huì)匹配到300.

     這個(gè)大家一開始可能會(huì)有些疑惑，但你可以反復(fù)折騰上面的demo去看這些關(guān)鍵詞是怎么工作的。

3、關(guān)于outline-offset屬性

       outline 屬性由于它能夠幫助調(diào)試而被眾所周知（它不影響頁(yè)面流）。規(guī)范上增加了一個(gè)outline-offset屬性，它的作用完全跟它名字所表示的一樣--讓你定義它的外框線應(yīng)該距離元素本身的偏移量。

     上面的demo中，通過拖動(dòng)范圍滑動(dòng)條向左或向右來(lái)看外邊框偏移量的改變。示例中的值從0px到30px，當(dāng)然你完全可以通過css來(lái)想要多大就大。需要注意的就是，雖然outline屬性是一個(gè)簡(jiǎn)寫屬性，但它不包含outline-offset屬性，所以你每次都需要再單獨(dú)定義outline-offset。

     outline-offset屬性唯一的缺點(diǎn)就是，它在IE瀏覽器（即使是IE11）中不起效 。

4、關(guān)于table-layout屬性

     你可能會(huì)想，這是很老的信息了。我對(duì)display: table很熟悉，最早用來(lái)實(shí)現(xiàn)垂直居中的一種方法。但那不是我想說(shuō)，注意我要說(shuō)的是table-layout屬性，而不是display屬性。

     table-layout屬性不像CSS的其他屬性那樣容易解釋，所以我們還是先來(lái)看看規(guī)范是如何解釋的：

"根據(jù)這個(gè)算法，table的橫向布局不依賴于單元格的內(nèi)容；它僅僅依賴于表格的寬度、列的寬度以及邊框和單元格的間距"

      這可能也是W3C規(guī)范史上第一次出現(xiàn)這樣很難理解的東西--LOL JK。

      結(jié)合一個(gè)生動(dòng)的例子能更好地理解。在下列的demo中，該表格在css中增加了

table-layout: fixed。點(diǎn)擊切換按鈕去可以切換該效果關(guān)閉與打開。

     在上面的例子中，你可以看到使用table-layout: fixed 相對(duì)于默認(rèn)的auto 值的優(yōu)點(diǎn)。這可能并不總是最佳或者必須的選擇，但當(dāng)你在處理有可變寬度數(shù)據(jù)單元格的表格時(shí)，這是一個(gè)不錯(cuò)的選擇。

     Chris Coyier去年為這個(gè)屬性做了一個(gè)偉大的改進(jìn)，所以如果你想要有一個(gè)更全面地認(rèn)識(shí)，這是最好的資料。

5、vertical-align屬性用在表格跟非表格中的時(shí)候表現(xiàn)不一樣

      如果你在2000年或者更早就開始接觸網(wǎng)站編程，或者你處理過很多HTML電子郵件的話，那么你可能會(huì)認(rèn)為vertical-align 屬性是對(duì)老的HTML4中valign屬性（一個(gè)在HTML5里過時(shí)的，不符合功能要求的標(biāo)簽）的一個(gè)標(biāo)準(zhǔn)升級(jí)。

     但在CSS中vertical-align 并不是起到那樣的作用。除開表格，我認(rèn)為這個(gè)屬性更牛逼的地方并不在于表格中的表現(xiàn)。

     所以，這個(gè)屬性被應(yīng)用于常規(guī)的元素跟表格單元的時(shí)候有什么不一樣的地方呢？

     當(dāng)vertical-align 不是應(yīng)用在表格單元的時(shí)候，它遵循下邊這些基本規(guī)則：

1. 它只在inline或inline-block元素中起效。

2. 它對(duì)元素中的內(nèi)容不起效，但能改變?cè)撛叵鄬?duì)于其他inline或inline-block元素的對(duì)齊。

3. 它受文本/字體屬性（比如行高line-height）或者相鄰inline或inline-block元素的大小設(shè)置的影響。   

來(lái)看個(gè)實(shí)例：

     vertical-align屬性定義在input元素上，通過點(diǎn)擊相應(yīng)的按鈕，你可以改變vertical-align的值為按鈕上對(duì)應(yīng)的值。你會(huì)發(fā)現(xiàn)每個(gè)值都會(huì)改變input 元素的位置。

     這個(gè)實(shí)例可以初步地認(rèn)識(shí)這個(gè)屬性以及它對(duì)應(yīng)的屬性值。更進(jìn)一步地了解，我們可以看一下 Christopher Aue’s 2014 post。

       當(dāng)它被應(yīng)用到表格中的時(shí)候，vertical-align又表現(xiàn)的很不一樣。在這個(gè)實(shí)例中，把這個(gè)屬性或者屬性值應(yīng)用在一個(gè)或多個(gè)表格單元，表格單元的內(nèi)容會(huì)被不同的屬性值所影響。

      如上面實(shí)例所示，只有四個(gè)屬性值在表格中起效，雖然左邊這個(gè)單元設(shè)置了baseline 屬性起作用，設(shè)置了vertical-align 的表格單元內(nèi)的文本在對(duì)齊方式起主要的作用。

6、偽元素::first-letter比你想象中更靈活

       偽元素::first-letter可以給元素的第一個(gè)字母定義樣式，讓你實(shí)現(xiàn)在印刷中多年前就有的段落效果（drop-cap 印刷的書本中經(jīng)常能看到的段落中的第一個(gè)字比其他字號(hào)要大的效果）。

       有個(gè)好消息就是瀏覽器快要出一個(gè)關(guān)于元素的首字母構(gòu)成的標(biāo)準(zhǔn)了。我最早在 Matt Andrews的twitter上看到有關(guān)這個(gè)推文，雖然他僅僅是發(fā)推文吐槽::first-letter選擇器很糟糕。下邊來(lái)看下他在CodePen 的實(shí)例：

       四大瀏覽器對(duì)這個(gè)的處理結(jié)果都是一樣的，所以我覺得這是一個(gè)正確的表現(xiàn)。但如果是括號(hào)的一半（‘（’）作為首字母的時(shí)候，這可能表現(xiàn)的有點(diǎn)奇怪。這更像是‘首字符’，所以我建議它作為一個(gè)新的偽類。

7、你可以在HTML class列表中使用無(wú)效字符作為分隔符

     這個(gè)概念是Ben Everard在2013年的時(shí)候提出，而且我認(rèn)為它值得推廣一下。Ben的觀點(diǎn)是用斜杠去將他的HTML類名進(jìn)行分組，以便他的代碼能夠更好地閱讀或?yàn)g覽。他的觀點(diǎn)認(rèn)為，轉(zhuǎn)義斜杠是一個(gè)無(wú)效字符，瀏覽器會(huì)無(wú)視它。

     所以你的HTML實(shí)例可能是這樣的：

     使用斜杠后，變成這樣：

     你也可以使用任何字符（無(wú)效的或者空字符）去實(shí)現(xiàn)同樣的效果：

     所有這些都是有效的，你也可以在下面的實(shí)例中去測(cè)試一下：

      這些我所指無(wú)效的分隔符不能作為你樣式里的類名。所以下邊的寫法是錯(cuò)誤的，所寫的樣式也不會(huì)起效：

./ {
 color: blue;}

     你如果非要用這些字符在你樣式里用來(lái)選中對(duì)應(yīng)的html元素的話，你可以用工具把他們進(jìn)行轉(zhuǎn)義后再在CSS中進(jìn)行使用，所以上面的例子如果這樣寫的話是可以生效的：

.\/ {
 color: blue;}

    另外，Unicode 字符可以不用轉(zhuǎn)義，這樣的話你就可以做些像下邊這樣瘋狂的嘗試：

      對(duì)應(yīng)的樣式：

.? {
 color: hotpink;}.★ {
 color: yellow;}

     當(dāng)然，你也可以將這些字符進(jìn)行轉(zhuǎn)義，而不是直接將這些字符插入到頁(yè)面中。下邊的代碼跟前面的代碼塊效果一樣：

.\2665 {
 color: hotpink;}.\2605 {
 color: yellow;}

8、動(dòng)畫重復(fù)的次數(shù)可以是帶小數(shù)的值

      在寫CSS關(guān)鍵幀動(dòng)畫的時(shí)候，你應(yīng)該可以用animation-iteration-count 屬性來(lái)定義動(dòng)畫重復(fù)執(zhí)行的次數(shù)：

.example {
 animation-iteration-count: 3;}

     這個(gè)例子中的整數(shù)值將會(huì)讓這個(gè)動(dòng)畫重復(fù)執(zhí)行3次。但你可能不知道這里我們可以使用小數(shù)值：

.example {
 animation-iteration-count: .5;}

      在這個(gè)案例中，這個(gè)動(dòng)畫將執(zhí)行半次（它會(huì)在第一次動(dòng)畫循環(huán)的中途停止）。我們來(lái)看一個(gè)兩個(gè)球在頁(yè)面上的動(dòng)畫案例，上面的那個(gè)球設(shè)置動(dòng)畫重復(fù)的次數(shù)為”1“，而下邊的求的重復(fù)次數(shù)為”.5“

       更新：有評(píng)論指出，這個(gè)案例在PC或者手機(jī)版的Safari中不能正常執(zhí)行。這是填充模式的相對(duì)關(guān)系中的一個(gè)bug， 我在這里寫了個(gè)文檔，這個(gè)bug現(xiàn)在已經(jīng)被修復(fù)，這也會(huì)在以后穩(wěn)定更新后改正過來(lái)。

      有趣的是，動(dòng)畫的迭代時(shí)間并不依賴于正在進(jìn)行的懂行的屬性或者某個(gè)值。如果你的某個(gè)物體運(yùn)行100px，動(dòng)畫執(zhí)行一半的點(diǎn)不一定正好是50px。比如上面的動(dòng)畫用的是linear 的timing效果，所以這個(gè)可以確定的是第二個(gè)球會(huì)剛好停在正中間的位置。

      下邊這里我們用跟上面兩個(gè)球同樣的動(dòng)畫，但使用ease 的timing效果：

       可以看到，第二個(gè)球停在了正中間往后的位置，這是因?yàn)槭褂昧瞬煌?span style="font-family: 微軟雅黑; font-size: 14px; color: rgb(74, 74, 74);">timing效果。

       如果你理解timing功能的話，你會(huì)發(fā)現(xiàn)使用ease-in-out 也會(huì)跟使用linear 一樣讓第二個(gè)球停在同樣的位置?？梢苑磸?fù)設(shè)置執(zhí)行次數(shù)的小數(shù)值跟timing functions的值來(lái)看不同的效果。

9、動(dòng)畫名稱會(huì)在動(dòng)畫的簡(jiǎn)寫方式中影響動(dòng)畫的使用

     有些開發(fā)者可能已經(jīng)發(fā)現(xiàn)了這一點(diǎn)，在規(guī)范中對(duì)這個(gè)也有個(gè)提醒。比方說(shuō)，你有以下的動(dòng)畫代碼：

@keyframes reverse {
 from {
 left: 0;
 }

 to {
 left: 300px;
 }}.example {
 animation: reverse 2s 1s;}

注意這里我使用reverse作為動(dòng)畫的名稱。簡(jiǎn)單來(lái)看，這并沒什么不妥，但要注意當(dāng)我們?cè)谟蒙厦娴拇a作為一個(gè)例子時(shí)發(fā)生了什么：

       這段動(dòng)畫并不起效，因?yàn)椤畆everse’是animation-direction屬性的一個(gè)關(guān)鍵字。任何的動(dòng)畫名稱在匹配到一個(gè)簡(jiǎn)寫語(yǔ)法中的關(guān)鍵字值的時(shí)候都會(huì)發(fā)生這樣的情況。但在普通寫法中這樣的情況不會(huì)發(fā)生（animation-name這樣單獨(dú)的動(dòng)畫名稱寫法的時(shí)候）。

     動(dòng)畫命名在簡(jiǎn)寫語(yǔ)法中包含了任何定時(shí)功能的關(guān)鍵字 （比如infinite, alternate, running, paused 等等）都會(huì)被阻斷。

10、使用樣式選取元素列表中元素的范圍

       我不知道是誰(shuí)首先這樣用的，但我第一次是在Gunnar Bittersmann 的這個(gè)demo 中看到的。比如說(shuō)有一個(gè)20個(gè)元素的有序列表，你想選擇第7到14個(gè)元素。這里你可以使用一個(gè)選擇器來(lái)實(shí)現(xiàn)：

ol li:nth-child(n+7):nth-child(-n+14) {
 background: lightpink;}

更新：在評(píng)論中有人指出，這個(gè)功能在Safari中不起效。幸運(yùn)地是，Matt Pomaski 提出了一個(gè)解決方案：只需將選擇器中的順序換一下，變成這樣：ol li:nth-child(-n+14):nth-child(n+7)。Webkit不能識(shí)別這種寫法，所以你最終還是可以讓它在Safari中正常運(yùn)行。

      這個(gè)代碼使用了鏈?zhǔn)浇Y(jié)構(gòu)的偽類表達(dá)式。雖然表達(dá)式有點(diǎn)難理解，但你可以通過表達(dá)式中的數(shù)字看到你想要選中的范圍。

     更詳細(xì)地解釋這個(gè)工作的原理：在鏈?zhǔn)浇Y(jié)構(gòu)的第一部分，表達(dá)式為“選中第七個(gè)元素及后面的所有元素”。第二部分的意思是“選取第十四個(gè)元素及前面的所有元素”。但由于兩部分是鏈接在一起的，每一個(gè)限制前一個(gè)的范圍。所以鏈?zhǔn)浇Y(jié)構(gòu)的第二部分不允許第一部分超過第十四個(gè)元素，然而第一部分又不允許第二部分選取到第七個(gè)元素之前的元素。

     想更進(jìn)一步了解這種類型的選擇器和表達(dá)式，你可以閱讀我以前的在這個(gè)主題的資料。

11、偽元素也適用于一些空元素

     如果你跟我一樣，嘗試過把偽元素附加到一個(gè)圖片或者表格input標(biāo)簽上。你會(huì)發(fā)現(xiàn)這樣并不生效因?yàn)閭卧卦诜情]合元素上無(wú)效。我想很多開發(fā)者都認(rèn)為空元素（即沒有閉合標(biāo)簽的元素）都是這樣的。但這并不正確。

     你可以將一些偽元素附加到一些不可替換的空元素上。這包含了hr 元素，如下邊的例子：

 在例子中有顏色的區(qū)域是一個(gè)水平線（hr 元素），有::before 和::after 偽元素附加在這個(gè)元素上。有趣的是，在一個(gè)同樣是不可替換的空元素br 上，卻無(wú)法實(shí)現(xiàn)同樣的效果。

     如果你瘋狂到把meta標(biāo)簽和 link 元素設(shè)置為display: block ，你也可以給meta標(biāo)簽和 link 元素附加偽類，如下邊例子所示。

     在例子中有顏色的區(qū)域是一個(gè)水平線（hr 元素），有::before 和::after 偽元素附加在這個(gè)元素上。有趣的是，在一個(gè)同樣是不可替換的空元素br 上，卻無(wú)法實(shí)現(xiàn)同樣的效果。

     如果你瘋狂到把meta標(biāo)簽和 link 元素設(shè)置為display: block ，你也可以給meta標(biāo)簽和 link 元素附加偽類，如下邊例子所示。

12、有些屬性值在選擇器中是不區(qū)分大小寫的

    這是一個(gè)不起眼的點(diǎn)，讓他們通過下邊的HTML來(lái)看：

    你可以通過屬性選擇器來(lái)給他們兩個(gè)添加樣式，像這樣：

div[class="box"] {
 color: blue;}input[type="email"] {
 border: solid 1px red;}

      上面這樣是沒問題的，那下邊這樣呢？

div[class="BOX"] {
 color: blue;}input[type="EMAIL"] {
 border: solid 1px red;}

      現(xiàn)在兩個(gè)屬性值都是大寫的。在這個(gè)示例中，因?yàn)閏lass 屬性是區(qū)分大小寫的，所以 .box 元素的樣式不生效。而另外一個(gè)email的標(biāo)簽，卻由于type 的屬性值不區(qū)分大小寫，所以它的樣式能生效。這并非什么重大發(fā)現(xiàn)，只是一些你之前可能沒留意到的。

總結(jié)

       這個(gè)希望不是那么俗氣的續(xù)集到此結(jié)束了。

     感覺好像我每周都在學(xué)一些獨(dú)一無(wú)二的CSS小技巧，也希望有些東西對(duì)大多人來(lái)說(shuō)都是全新的知識(shí)。晦澀的CSS訣竅或技術(shù)，你更喜歡哪個(gè)？是否有一些特性或功能是你認(rèn)為你不是特別了解但又是具有很好的瀏覽器支持的？請(qǐng)?jiān)僭u(píng)論中告知我們。

------北京網(wǎng)站制作公司   北京傳誠(chéng)信