2018-5-22 周周
此文為譯文，在這篇文章中提到了12條我們前端人員在日常工作中不是特別熟悉而又確實可以使用或者瀏覽器是可以很好支持的CSS技巧，熟知這些點，對我們深入研究CSS有很好的幫助。在本文中，用括號的方式加了一些簡單的算是注釋的個人理解。 原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/
1、 border-radius屬性可以使用'/'（斜杠）標(biāo)簽
不管你信不信，下邊是有效的border-radius代碼:
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}
如果你之前沒有見過這些，這里你可能會有一些困惑，所以這里有規(guī)范的解釋:
“如果斜杠/前后都設(shè)了值，那么斜杠前面的值就設(shè)定橫向的圓角半徑值，而斜杠后面的值就是設(shè)定縱向的半徑值。如果沒有斜杠的話，就把橫向跟縱向的值設(shè)定為相等?！?/span>
圖片注釋：“border-top-left-radius: 55pt 25pt 的兩個值定義了這個圓角的曲率（彎曲度） ” 所以，斜杠在值中的作用是讓你創(chuàng)建不對稱（橫向跟縱向值）的圓角曲率
2、使用bolder、lighter相關(guān)關(guān)鍵字進(jìn)行font-weight屬性的定義
正常來說你所看到的font-weight 屬性的定義，它的值要么是normal要么是bold。你也偶爾能看到整數(shù)以整百為增量的值：100,200、、最大到900.
然而，bolder跟lighter這兩個值經(jīng)常會被忘記。
根據(jù)規(guī)范定義，這兩個關(guān)鍵詞指定了比繼承值更粗或更細(xì)的值。它的出現(xiàn)會讓你在處理一個比簡單的‘bold’更粗一點或者比正常文本更細(xì)一點的多種權(quán)重的字號的時候表現(xiàn)的更加明顯。（這塊可能會有點難理解，其實這里是跟字體本身有關(guān)聯(lián)的，如果你的字體，比如例子中用到的‘Exo 2’字體中，因為這個字體最細(xì)為100，bolder一下就變成400，再bolder一下是700，其實它這個bolder跟lighter是有個固定跳到的數(shù)值的，只會匹配到400,700,900這樣的值里，當(dāng)你的繼承值為100、200或300，bolder一下，這個bolder的值都會是400，繼承值為900,800，lighter一下，這個值都一樣會是700，所以兩個關(guān)鍵字其實是只會是400、700、900三個值的。）
3、關(guān)于outline-offset屬性
outline 屬性由于它能夠幫助調(diào)試而被眾所周知（它不影響頁面流）。規(guī)范上增加了一個outline-offset屬性，它的作用完全跟它名字所表示的一樣--讓你定義它的外框線應(yīng)該距離元素本身的偏移量。
需要注意的就是，雖然outline屬性是一個簡寫屬性，但它不包含outline-offset屬性，所以你每次都需要再單獨定義outline-offset。
outline-offset屬性唯一的缺點就是，它在IE瀏覽器（即使是IE11）中不起效。
4、關(guān)于table-layout屬性
你可能會想，這是很老的信息了。我對display: table很熟悉，最早用來實現(xiàn)垂直居中的一種方法。但那不是我想說，注意我要說的是table-layout屬性，而不是display屬性。
table-layout屬性不像CSS的其他屬性那樣容易解釋，所以我們還是先來看看規(guī)范是如何解釋的：
"根據(jù)這個算法，table的橫向布局不依賴于單元格的內(nèi)容；它僅僅依賴于表格的寬度、列的寬度以及邊框和單元格的間距"
這可能也是W3C規(guī)范史上第一次出現(xiàn)這樣很難理解的東西
5、vertical-align屬性用在表格跟非表格中的時候表現(xiàn)不一樣
如果你在2000年或者更早就開始接觸網(wǎng)站編程，或者你處理過很多HTML電子郵件的話，那么你可能會認(rèn)為vertical-align 屬性是對老的HTML4中valign屬性（一個在HTML5里過時的，不符合功能要求的標(biāo)簽）的一個標(biāo)準(zhǔn)升級。
但在CSS中vertical-align 并不是起到那樣的作用。除開表格，我認(rèn)為這個屬性更牛逼的地方并不在于表格中的表現(xiàn)。
所以，這個屬性被應(yīng)用于常規(guī)的元素跟表格單元的時候有什么不一樣的地方呢？
當(dāng)vertical-align 不是應(yīng)用在表格單元的時候，它遵循下邊這些基本規(guī)則：
6、偽元素::first-letter比你想象中更靈活
偽元素::first-letter可以給元素的第一個字母定義樣式，讓你實現(xiàn)在印刷中多年前就有的段落效果（drop-cap 印刷的書本中經(jīng)常能看到的段落中的第一個字比其他字號要大的效果）。
有個好消息就是瀏覽器快要出一個關(guān)于元素的首字母構(gòu)成的標(biāo)準(zhǔn)了。我最早在 Matt Andrews的twitter上看到有關(guān)這個推文，雖然他僅僅是發(fā)推文吐槽::first-letter選擇器很糟糕。
7、你可以在HTML class列表中使用無效字符作為分隔符
這個概念是Ben Everard在2013年的時候提出，而且我認(rèn)為它值得推廣一下。Ben的觀點是用斜杠去將他的HTML類名進(jìn)行分組，以便他的代碼能夠更好地閱讀或瀏覽。他的觀點認(rèn)為，轉(zhuǎn)義斜杠是一個無效字符，瀏覽器會無視它。
所以你的HTML實例可能是這樣的：
<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent"> 使用斜杠后，變成這樣： <div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent"> 你也可以使用任何字符（無效的或者空字符）去實現(xiàn)同樣的效果： <div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent">[/font]
<div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent">
<div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent">
8、動畫重復(fù)的次數(shù)可以是帶小數(shù)的值
在寫CSS關(guān)鍵幀動畫的時候，你應(yīng)該可以用animation-iteration-count 屬性來定義動畫重復(fù)執(zhí)行的次數(shù)：
.example {
animation-iteration-count: 3;
}
這個例子中的整數(shù)值將會讓這個動畫重復(fù)執(zhí)行3次。但你可能不知道這里我們可以使用小數(shù)值：
.example {
animation-iteration-count: .5;
}
在這個案例中，這個動畫將執(zhí)行半次（它會在第一次動畫循環(huán)的中途停止）。
9、動畫名稱會在動畫的簡寫方式中影響動畫的使用
有些開發(fā)者可能已經(jīng)發(fā)現(xiàn)了這一點，在規(guī)范中對這個也有個提醒。比方說，你有以下的動畫代碼：
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
.example {
animation: reverse 2s 1s;
}
注意這里我使用reverse作為動畫的名稱。簡單來看，這并沒什么不妥，但要注意當(dāng)我們在用上面的代碼作為一個例子時發(fā)生了什么：
這段動畫并不起效，因為‘reverse’是animation-direction屬性的一個關(guān)鍵字。任何的動畫名稱在匹配到一個簡寫語法中的關(guān)鍵字值的時候都會發(fā)生這樣的情況。但在普通寫法中這樣的情況不會發(fā)生（animation-name這樣單獨的動畫名稱寫法的時候）。
動畫命名在簡寫語法中包含了任何定時功能的關(guān)鍵字 （比如infinite, alternate, running, paused 等等）都會被阻斷。
10、使用樣式選取元素列表中元素的范圍
我不知道是誰首先這樣用的，但我第一次是在Gunnar Bittersmann 的這個demo 中看到的。比如說有一個20個元素的有序列表，你想選擇第7到14個元素。這里你可以使用一個選擇器來實現(xiàn)：
ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
這個代碼使用了鏈?zhǔn)浇Y(jié)構(gòu)的偽類表達(dá)式。雖然表達(dá)式有點難理解，但你可以通過表達(dá)式中的數(shù)字看到你想要選中的范圍。
更詳細(xì)地解釋這個工作的原理：在鏈?zhǔn)浇Y(jié)構(gòu)的第一部分，表達(dá)式為“選中第七個元素及后面的所有元素”。第二部分的意思是“選取第十四個元素及前面的所有元素”。但由于兩部分是鏈接在一起的，每一個限制前一個的范圍。所以鏈?zhǔn)浇Y(jié)構(gòu)的第二部分不允許第一部分超過第十四個元素，然而第一部分又不允許第二部分選取到第七個元素之前的元素。
11、偽元素也適用于一些空元素
如果你跟我一樣，嘗試過把偽元素附加到一個圖片或者表格input標(biāo)簽上。你會發(fā)現(xiàn)這樣并不生效因為偽元素在非閉合元素上無效。我想很多開發(fā)者都認(rèn)為空元素（即沒有閉合標(biāo)簽的元素）都是這樣的。但這并不正確。
12、有些屬性值在選擇器中是不區(qū)分大小寫的
這是一個不起眼的點，讓他們通過下邊的HTML來看：
<div class="box"></div>
<input type="email">
你可以通過屬性選擇器來給他們兩個添加樣式，像這樣：
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)在兩個屬性值都是大寫的。在這個示例中，因為class 屬性是區(qū)分大小寫的，所以 .box 元素的樣式不生效。而另外一個email的標(biāo)簽，卻由于type 的屬性值不區(qū)分大小寫，所以它的樣式能生效。這并非什么重大發(fā)現(xiàn)，只是一些你之前可能沒留意到的。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com