2018-5-22 高勁
此文為譯文，在這篇文章中提到了12條我們前端人員在日常工作中不是特別熟悉而又確實(shí)可以使用或者瀏覽器是可以很好支持的CSS技巧，熟知這些點(diǎn)，對(duì)我們深入研究CSS有很好的幫助。在本文中，用括號(hào)的方式加了一些簡(jiǎn)單的算是注釋的個(gè)人理解。 原文地址：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;
}
如果你之前沒(méi)有見(jiàn)過(guò)這些，這里你可能會(huì)有一些困惑，所以這里有規(guī)范的解釋:
“如果斜杠/前后都設(shè)了值，那么斜杠前面的值就設(shè)定橫向的圓角半徑值，而斜杠后面的值就是設(shè)定縱向的半徑值。如果沒(méi)有斜杠的話，就把橫向跟縱向的值設(shè)定為相等。”
圖片注釋：“border-top-left-radius: 55pt 25pt 的兩個(gè)值定義了這個(gè)圓角的曲率（彎曲度） ” 所以，斜杠在值中的作用是讓你創(chuàng)建不對(duì)稱（橫向跟縱向值）的圓角曲率
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è)值的。）
3、關(guān)于outline-offset屬性
outline 屬性由于它能夠幫助調(diào)試而被眾所周知（它不影響頁(yè)面流）。規(guī)范上增加了一個(gè)outline-offset屬性，它的作用完全跟它名字所表示的一樣--讓你定義它的外框線應(yīng)該距離元素本身的偏移量。
需要注意的就是，雖然outline屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，但它不包含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)這樣很難理解的東西
5、vertical-align屬性用在表格跟非表格中的時(shí)候表現(xiàn)不一樣
如果你在2000年或者更早就開(kāi)始接觸網(wǎng)站編程，或者你處理過(guò)很多HTML電子郵件的話，那么你可能會(huì)認(rèn)為vertical-align 屬性是對(duì)老的HTML4中valign屬性（一個(gè)在HTML5里過(guò)時(shí)的，不符合功能要求的標(biāo)簽）的一個(gè)標(biāo)準(zhǔn)升級(jí)。
但在CSS中vertical-align 并不是起到那樣的作用。除開(kāi)表格，我認(rèn)為這個(gè)屬性更牛逼的地方并不在于表格中的表現(xiàn)。
所以，這個(gè)屬性被應(yīng)用于常規(guī)的元素跟表格單元的時(shí)候有什么不一樣的地方呢？
當(dāng)vertical-align 不是應(yīng)用在表格單元的時(shí)候，它遵循下邊這些基本規(guī)則：
6、偽元素::first-letter比你想象中更靈活
偽元素::first-letter可以給元素的第一個(gè)字母定義樣式，讓你實(shí)現(xiàn)在印刷中多年前就有的段落效果（drop-cap 印刷的書(shū)本中經(jīng)常能看到的段落中的第一個(gè)字比其他字號(hào)要大的效果）。
有個(gè)好消息就是瀏覽器快要出一個(gè)關(guān)于元素的首字母構(gòu)成的標(biāo)準(zhǔn)了。我最早在 Matt Andrews的twitter上看到有關(guān)這個(gè)推文，雖然他僅僅是發(fā)推文吐槽::first-letter選擇器很糟糕。
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í)例可能是這樣的：
<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"> 你也可以使用任何字符（無(wú)效的或者空字符）去實(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、動(dòng)畫(huà)重復(fù)的次數(shù)可以是帶小數(shù)的值
在寫(xiě)CSS關(guān)鍵幀動(dòng)畫(huà)的時(shí)候，你應(yīng)該可以用animation-iteration-count 屬性來(lái)定義動(dòng)畫(huà)重復(fù)執(zhí)行的次數(shù)：
.example {
animation-iteration-count: 3;
}
這個(gè)例子中的整數(shù)值將會(huì)讓這個(gè)動(dòng)畫(huà)重復(fù)執(zhí)行3次。但你可能不知道這里我們可以使用小數(shù)值：
.example {
animation-iteration-count: .5;
}
在這個(gè)案例中，這個(gè)動(dòng)畫(huà)將執(zhí)行半次（它會(huì)在第一次動(dòng)畫(huà)循環(huán)的中途停止）。
9、動(dòng)畫(huà)名稱會(huì)在動(dòng)畫(huà)的簡(jiǎn)寫(xiě)方式中影響動(dòng)畫(huà)的使用
有些開(kāi)發(fā)者可能已經(jīng)發(fā)現(xiàn)了這一點(diǎn)，在規(guī)范中對(duì)這個(gè)也有個(gè)提醒。比方說(shuō)，你有以下的動(dòng)畫(huà)代碼：
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
.example {
animation: reverse 2s 1s;
}
注意這里我使用reverse作為動(dòng)畫(huà)的名稱。簡(jiǎn)單來(lái)看，這并沒(méi)什么不妥，但要注意當(dāng)我們?cè)谟蒙厦娴拇a作為一個(gè)例子時(shí)發(fā)生了什么：
這段動(dòng)畫(huà)并不起效，因?yàn)椤畆everse’是animation-direction屬性的一個(gè)關(guān)鍵字。任何的動(dòng)畫(huà)名稱在匹配到一個(gè)簡(jiǎn)寫(xiě)語(yǔ)法中的關(guān)鍵字值的時(shí)候都會(huì)發(fā)生這樣的情況。但在普通寫(xiě)法中這樣的情況不會(huì)發(fā)生（animation-name這樣單獨(dú)的動(dòng)畫(huà)名稱寫(xiě)法的時(shí)候）。
動(dòng)畫(huà)命名在簡(jiǎn)寫(xiě)語(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;
}
這個(gè)代碼使用了鏈?zhǔn)浇Y(jié)構(gòu)的偽類表達(dá)式。雖然表達(dá)式有點(diǎn)難理解，但你可以通過(guò)表達(dá)式中的數(shù)字看到你想要選中的范圍。
更詳細(xì)地解釋這個(gè)工作的原理：在鏈?zhǔn)浇Y(jié)構(gòu)的第一部分，表達(dá)式為“選中第七個(gè)元素及后面的所有元素”。第二部分的意思是“選取第十四個(gè)元素及前面的所有元素”。但由于兩部分是鏈接在一起的，每一個(gè)限制前一個(gè)的范圍。所以鏈?zhǔn)浇Y(jié)構(gòu)的第二部分不允許第一部分超過(guò)第十四個(gè)元素，然而第一部分又不允許第二部分選取到第七個(gè)元素之前的元素。
11、偽元素也適用于一些空元素
如果你跟我一樣，嘗試過(guò)把偽元素附加到一個(gè)圖片或者表格input標(biāo)簽上。你會(huì)發(fā)現(xiàn)這樣并不生效因?yàn)閭卧卦诜情]合元素上無(wú)效。我想很多開(kāi)發(fā)者都認(rèn)為空元素（即沒(méi)有閉合標(biāo)簽的元素）都是這樣的。但這并不正確。
12、有些屬性值在選擇器中是不區(qū)分大小寫(xiě)的
這是一個(gè)不起眼的點(diǎn)，讓他們通過(guò)下邊的HTML來(lái)看：
<div class="box"></div>
<input type="email">
你可以通過(guò)屬性選擇器來(lái)給他們兩個(gè)添加樣式，像這樣：
div[class="box"] {
color: blue;
}
input[type="email"] {
border: solid 1px red;
}
上面這樣是沒(méi)問(wèn)題的，那下邊這樣呢？
div[class="BOX"] {
color: blue;
}
input[type="EMAIL"] {
border: solid 1px red;
}
現(xiàn)在兩個(gè)屬性值都是大寫(xiě)的。在這個(gè)示例中，因?yàn)閏lass 屬性是區(qū)分大小寫(xiě)的，所以 .box 元素的樣式不生效。而另外一個(gè)email的標(biāo)簽，卻由于type 的屬性值不區(qū)分大小寫(xiě)，所以它的樣式能生效。這并非什么重大發(fā)現(xiàn)，只是一些你之前可能沒(méi)留意到的。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.sdgs6788.com