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