此文为译文，作者在这篇文章中提到了12条我们前端人员在日常工作中不是特别熟悉而又确实可以使用或者浏览器是可以很好支持的CSS技巧，熟知这些点，对我们深入研究CSS有很好的帮助。
       鉴于本人英语水平有限，有些地方的翻译可能不是特别准确，或者不是很容易理解，在译文中，我也用括号的方式加了一些简单的算是注释的个人理解。各位读者也可以结合着原文去阅读，以便更好地理解作者所表达的意思！
       原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/
      一年前我发表了《12条鲜有人知的css的事实》，到今天为止，它已成为站点里最受欢迎的文章。那篇文章发表到现在，我已经为新的文章收集了更多css小技巧。我们都知道，所有成功的电影都应该催生出一部时髦的续集，对吧？

接下来，我们马上进入开发者十二条。我能肯定的是，大部分人对这些多少都有些了解，但你们也可以在评论中让我知道哪些对你来说是陌生的。

1、 border-radius属性可以使用'/'（斜杠）标签 这是我四年以前在我的站点写的一些东西，但也行有些新手包括有经验的开发者，还是不太熟悉这些特性。
不管你信不信，下边是有效的border-radius代码:

[CSS] 纯文本查看 复制代码

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

如果你之前没有见过这些，这里你可能会有一些困惑，所以这里有规范的解释：

“如果斜杠/前后都设了值，那么斜杠前面的值就设定横向的圆角半径值，而斜杠后面的值就是设定纵向的半径值。如果没有斜杠的话，就把横向跟纵向的值设定为相等。”

图片注释：“border-top-left-radius: 55pt 25pt 的两个值定义了这个圆角的曲率（弯曲度） ”  所以，斜杠在值中的作用是让你创建不对称（横向跟纵向值）的圆角曲率

2、使用bolder、lighter相关关键字进行font-weight属性的定义正常来说你所看到的font-weight 属性的定义，它的值要么是normal要么是bold。你也偶尔能看到整数以整百为增量的值：100,200、、最大到900.
     然而，bolder跟lighter这两个值经常会被忘记。
     根据规范定义，这两个关键词指定了比继承值更粗或更细的值。它的出现会让你在处理一个比简单的‘bold’更粗一点或者比正常文 本更细一点的多种权重的字号的时候表现的更加明显。（这块可能会有点难理解，其实这里是跟字体本身有关联的，如果你的字体，比如例子中用到的‘Exo 2’字体中，因为这个字体最细为100，bolder一下就变成400，再bolder一下是700，其实它这个bolder跟lighter是有个固定跳到的数值的，只会匹配到400,700,900这样的值里，当你的继承值为100、200或300，bolder一下，这个bolder的值都会是400，继承值为900,800，lighter一下，这个值都一样会是700，所以两个关键字其实是只会是400、700、900三个值的）


3、关于outline-offset属性
outline 属性由于它能够帮助调试而被众所周知（它不影响页面流）。规范上增加了一个outline-offset属性，它的作用完全跟它名字所表示的一样--让你定义它的外框线应该距离元素本身的偏移量。
     上面的demo中，通过拖动范围滑动条向左或向右来看外边框偏移量的改变。示例中的值从0px到30px，当然你完全可以通过css来想要多大就大。需要注意的就是，虽然outline属性是一个简写属性，但它不包含outline-offset属性，所以你每次都需要再单独定义outline-offset。
     outline-offset属性唯一的缺点就是，它在IE浏览器（即使是IE11）中不起效 。



4、关于table-layout属性你可能会想，这是很老的信息了。我对display: table很熟悉，最早用来实现垂直居中的一种方法。但那不是我想说，注意我要说的是table-layout属性，而不是display属性。
  table-layout属性不像CSS的其他属性那样容易解释，所以我们还是先来看看规范是如何解释的：
"根据这个算法，table的横向布局不依赖于单元格的内容；它仅仅依赖于表格的宽度、列的宽度以及边框和单元格的间距"

这可能也是W3C规范史上第一次出现这样很难理解的东西


5、vertical-align属性用在表格跟非表格中的时候表现不一样
如果你在2000年或者更早就开始接触网站编程，或者你处理过很多HTML电子邮件的话，那么你可能会认为vertical-align 属性是对老的HTML4中valign属性（一个在HTML5里过时的，不符合功能要求的标签）的一个标准升级。
但在CSS中vertical-align 并不是起到那样的作用。除开表格，我认为这个属性更牛逼的地方并不在于表格中的表现。
     所以，这个属性被应用于常规的元素跟表格单元的时候有什么不一样的地方呢？
     当vertical-align 不是应用在表格单元的时候，它遵循下边这些基本规则：

• 它只在inline或inline-block元素中起效。
• 它对元素中的内容不起效，但能改变该元素相对于其他inline或inline-block元素的对齐。
• 它受文本/字体属性（比如行高line-height）或者相邻inline或inline-block元素的大小设置的影响。
• 
  

6、伪元素::first-letter比你想象中更灵活


伪元素::first-letter可以给元素的第一个字母定义样式，让你实现在印刷中多年前就有的段落效果（drop-cap 印刷的书本中经常能看到的段落中的第一个字比其他字号要大的效果）。
有个好消息就是浏览器快要出一个关于元素的首字母构成的标准了。我最早在 Matt Andrews的twitter上看到有关这个推文，虽然他仅仅是发推文吐槽::first-letter选择器很糟糕。
7、你可以在HTML class列表中使用无效字符作为分隔符
这个概念是Ben Everard在2013年的时候提出，而且我认为它值得推广一下。Ben的观点是用斜杠去将他的HTML类名进行分组，以便他的代码能够更好地阅读或浏览。他的观点认为，转义斜杠是一个无效字符，浏览器会无视它。
所以你的HTML实例可能是这样的：

[HTML] 纯文本查看 复制代码

<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent">

使用斜杠后，变成这样：

[HTML] 纯文本查看 复制代码

<div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent">

你也可以使用任何字符（无效的或者空字符）去实现同样的效果：

[HTML] 纯文本查看 复制代码

<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、动画重复的次数可以是带小数的值在写CSS关键帧动画的时候，你应该可以用animation-iteration-count 属性来定义动画重复执行的次数：

[CSS] 纯文本查看 复制代码

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

这个例子中的整数值将会让这个动画重复执行3次。但你可能不知道这里我们可以使用小数值：

[CSS] 纯文本查看 复制代码

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

      在这个案例中，这个动画将执行半次（它会在第一次动画循环的中途停止）


9、动画名称会在动画的简写方式中影响动画的使用
有些开发者可能已经发现了这一点，在规范中对这个也有个提醒。比方说，你有以下的动画代码：

[CSS] 纯文本查看 复制代码

@keyframes reverse {
from {
left: 0;
}

to {
left: 300px;
}
}

.example {
animation: reverse 2s 1s;
}

注意这里我使用reverse作为动画的名称。简单来看，这并没什么不妥，但要注意当我们在用上面的代码作为一个例子时发生了什么：
这段动画并不起效，因为‘reverse’是animation-direction属性的一个关键字。任何的动画名称在匹配到一个简写语法中的关键字值的时候都会发生这样的情况。但在普通写法中这样的情况不会发生（animation-name这样单独的动画名称写法的时候）。
动画命名在简写语法中包含了任何定时功能的关键字 （比如infinite, alternate, running, paused 等等）都会被阻断。


10、使用样式选取元素列表中元素的范围
我不知道是谁首先这样用的，但我第一次是在Gunnar Bittersmann 的这个demo 中看到的。比如说有一个20个元素的有序列表，你想选择第7到14个元素。这里你可以使用一个选择器来实现：

[CSS] 纯文本查看 复制代码

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

这个代码使用了链式结构的伪类表达式。虽然表达式有点难理解，但你可以通过表达式中的数字看到你想要选中的范围。
更详细地解释这个工作的原理：在链式结构的第一部分，表达式为“选中第七个元素及后面的所有元素”。第二部分的意思是“选取第十四个元素及前面的所有元素”。但由于两部分是链接在一起的，每一个限制前一个的范围。所以链式结构的第二部分不允许第一部分超过第十四个元素，然而第一部分又不允许第二部分选取到第七个元素之前的元素。


11、伪元素也适用于一些空元素
如果你跟我一样，尝试过把伪元素附加到一个图片或者表格input标签上。你会发现这样并不生效因为伪元素在非闭合元素上无效。我想很多开发者都认为空元素（即没有闭合标签的元素）都是这样的。但这并不正确。


12、有些属性值在选择器中是不区分大小写的
这是一个不起眼的点，让他们通过下边的HTML来看：

[HTML] 纯文本查看 复制代码

<div class="box"></div>
<input type="email">

你可以通过属性选择器来给他们两个添加样式，像这样：

[CSS] 纯文本查看 复制代码

div[class="box"] {
color: blue;
}

input[type="email"] {
border: solid 1px red;
}

  上面这样是没问题的，那下边这样呢？

[CSS] 纯文本查看 复制代码

div[class="BOX"] {
color: blue;
}

input[type="EMAIL"] {
border: solid 1px red;
}

   现在两个属性值都是大写的。在这个示例中，因为class 属性是区分大小写的，所以 .box 元素的样式不生效。而另外一个email的标签，却由于type 的属性值不区分大小写，所以它的样式能生效。这并非什么重大发现，只是一些你之前可能没留意到的。

       此文为译文，作者在这篇文章中提到了12条我们前端人员在日常工作中不是特别熟悉而又确实可以使用或者浏览器是可以很好支持的CSS技巧，熟知这些点，对我们深入研究CSS有很好的帮助。
       鉴于本人英语水平有限，有些地方的翻译可能不是特别准确，或者不是很容易理解，在译文中，我也用括号的方式加了一些简单的算是注释的个人理解。各位读者也可以结合着原文去阅读，以便更好地理解作者所表达的意思！
       原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/
      一年前我发表了《12条鲜有人知的css的事实》，到今天为止，它已成为站点里最受欢迎的文章。那篇文章发表到现在，我已经为新的文章收集了更多css小技巧。我们都知道，所有成功的电影都应该催生出一部时髦的续集，对吧？

接下来，我们马上进入开发者十二条。我能肯定的是，大部分人对这些多少都有些了解，但你们也可以在评论中让我知道哪些对你来说是陌生的。

1、 border-radius属性可以使用'/'（斜杠）标签 这是我四年以前在我的站点写的一些东西，但也行有些新手包括有经验的开发者，还是不太熟悉这些特性。
不管你信不信，下边是有效的border-radius代码:

[CSS] 纯文本查看 复制代码

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

如果你之前没有见过这些，这里你可能会有一些困惑，所以这里有规范的解释：

“如果斜杠/前后都设了值，那么斜杠前面的值就设定横向的圆角半径值，而斜杠后面的值就是设定纵向的半径值。如果没有斜杠的话，就把横向跟纵向的值设定为相等。”

图片注释：“border-top-left-radius: 55pt 25pt 的两个值定义了这个圆角的曲率（弯曲度） ”  所以，斜杠在值中的作用是让你创建不对称（横向跟纵向值）的圆角曲率

2、使用bolder、lighter相关关键字进行font-weight属性的定义正常来说你所看到的font-weight 属性的定义，它的值要么是normal要么是bold。你也偶尔能看到整数以整百为增量的值：100,200、、最大到900.
     然而，bolder跟lighter这两个值经常会被忘记。
     根据规范定义，这两个关键词指定了比继承值更粗或更细的值。它的出现会让你在处理一个比简单的‘bold’更粗一点或者比正常文 本更细一点的多种权重的字号的时候表现的更加明显。（这块可能会有点难理解，其实这里是跟字体本身有关联的，如果你的字体，比如例子中用到的‘Exo 2’字体中，因为这个字体最细为100，bolder一下就变成400，再bolder一下是700，其实它这个bolder跟lighter是有个固定跳到的数值的，只会匹配到400,700,900这样的值里，当你的继承值为100、200或300，bolder一下，这个bolder的值都会是400，继承值为900,800，lighter一下，这个值都一样会是700，所以两个关键字其实是只会是400、700、900三个值的）


3、关于outline-offset属性
outline 属性由于它能够帮助调试而被众所周知（它不影响页面流）。规范上增加了一个outline-offset属性，它的作用完全跟它名字所表示的一样--让你定义它的外框线应该距离元素本身的偏移量。
     上面的demo中，通过拖动范围滑动条向左或向右来看外边框偏移量的改变。示例中的值从0px到30px，当然你完全可以通过css来想要多大就大。需要注意的就是，虽然outline属性是一个简写属性，但它不包含outline-offset属性，所以你每次都需要再单独定义outline-offset。
     outline-offset属性唯一的缺点就是，它在IE浏览器（即使是IE11）中不起效 。



4、关于table-layout属性你可能会想，这是很老的信息了。我对display: table很熟悉，最早用来实现垂直居中的一种方法。但那不是我想说，注意我要说的是table-layout属性，而不是display属性。
  table-layout属性不像CSS的其他属性那样容易解释，所以我们还是先来看看规范是如何解释的：
"根据这个算法，table的横向布局不依赖于单元格的内容；它仅仅依赖于表格的宽度、列的宽度以及边框和单元格的间距"

这可能也是W3C规范史上第一次出现这样很难理解的东西


5、vertical-align属性用在表格跟非表格中的时候表现不一样
如果你在2000年或者更早就开始接触网站编程，或者你处理过很多HTML电子邮件的话，那么你可能会认为vertical-align 属性是对老的HTML4中valign属性（一个在HTML5里过时的，不符合功能要求的标签）的一个标准升级。
但在CSS中vertical-align 并不是起到那样的作用。除开表格，我认为这个属性更牛逼的地方并不在于表格中的表现。
     所以，这个属性被应用于常规的元素跟表格单元的时候有什么不一样的地方呢？
     当vertical-align 不是应用在表格单元的时候，它遵循下边这些基本规则：

• 它只在inline或inline-block元素中起效。
• 它对元素中的内容不起效，但能改变该元素相对于其他inline或inline-block元素的对齐。
• 它受文本/字体属性（比如行高line-height）或者相邻inline或inline-block元素的大小设置的影响。
• 
  

6、伪元素::first-letter比你想象中更灵活


伪元素::first-letter可以给元素的第一个字母定义样式，让你实现在印刷中多年前就有的段落效果（drop-cap 印刷的书本中经常能看到的段落中的第一个字比其他字号要大的效果）。
有个好消息就是浏览器快要出一个关于元素的首字母构成的标准了。我最早在 Matt Andrews的twitter上看到有关这个推文，虽然他仅仅是发推文吐槽::first-letter选择器很糟糕。
7、你可以在HTML class列表中使用无效字符作为分隔符
这个概念是Ben Everard在2013年的时候提出，而且我认为它值得推广一下。Ben的观点是用斜杠去将他的HTML类名进行分组，以便他的代码能够更好地阅读或浏览。他的观点认为，转义斜杠是一个无效字符，浏览器会无视它。
所以你的HTML实例可能是这样的：

[HTML] 纯文本查看 复制代码

<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent">

使用斜杠后，变成这样：

[HTML] 纯文本查看 复制代码

<div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent">

你也可以使用任何字符（无效的或者空字符）去实现同样的效果：

[HTML] 纯文本查看 复制代码

<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、动画重复的次数可以是带小数的值在写CSS关键帧动画的时候，你应该可以用animation-iteration-count 属性来定义动画重复执行的次数：

[CSS] 纯文本查看 复制代码

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

这个例子中的整数值将会让这个动画重复执行3次。但你可能不知道这里我们可以使用小数值：

[CSS] 纯文本查看 复制代码

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

      在这个案例中，这个动画将执行半次（它会在第一次动画循环的中途停止）


9、动画名称会在动画的简写方式中影响动画的使用
有些开发者可能已经发现了这一点，在规范中对这个也有个提醒。比方说，你有以下的动画代码：

[CSS] 纯文本查看 复制代码

@keyframes reverse {
from {
left: 0;
}

to {
left: 300px;
}
}

.example {
animation: reverse 2s 1s;
}

注意这里我使用reverse作为动画的名称。简单来看，这并没什么不妥，但要注意当我们在用上面的代码作为一个例子时发生了什么：
这段动画并不起效，因为‘reverse’是animation-direction属性的一个关键字。任何的动画名称在匹配到一个简写语法中的关键字值的时候都会发生这样的情况。但在普通写法中这样的情况不会发生（animation-name这样单独的动画名称写法的时候）。
动画命名在简写语法中包含了任何定时功能的关键字 （比如infinite, alternate, running, paused 等等）都会被阻断。


10、使用样式选取元素列表中元素的范围
我不知道是谁首先这样用的，但我第一次是在Gunnar Bittersmann 的这个demo 中看到的。比如说有一个20个元素的有序列表，你想选择第7到14个元素。这里你可以使用一个选择器来实现：

[CSS] 纯文本查看 复制代码

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

这个代码使用了链式结构的伪类表达式。虽然表达式有点难理解，但你可以通过表达式中的数字看到你想要选中的范围。
更详细地解释这个工作的原理：在链式结构的第一部分，表达式为“选中第七个元素及后面的所有元素”。第二部分的意思是“选取第十四个元素及前面的所有元素”。但由于两部分是链接在一起的，每一个限制前一个的范围。所以链式结构的第二部分不允许第一部分超过第十四个元素，然而第一部分又不允许第二部分选取到第七个元素之前的元素。


11、伪元素也适用于一些空元素
如果你跟我一样，尝试过把伪元素附加到一个图片或者表格input标签上。你会发现这样并不生效因为伪元素在非闭合元素上无效。我想很多开发者都认为空元素（即没有闭合标签的元素）都是这样的。但这并不正确。


12、有些属性值在选择器中是不区分大小写的
这是一个不起眼的点，让他们通过下边的HTML来看：

[HTML] 纯文本查看 复制代码

<div class="box"></div>
<input type="email">

你可以通过属性选择器来给他们两个添加样式，像这样：

[CSS] 纯文本查看 复制代码

div[class="box"] {
color: blue;
}

input[type="email"] {
border: solid 1px red;
}

  上面这样是没问题的，那下边这样呢？

[CSS] 纯文本查看 复制代码

div[class="BOX"] {
color: blue;
}

input[type="EMAIL"] {
border: solid 1px red;
}

   现在两个属性值都是大写的。在这个示例中，因为class 属性是区分大小写的，所以 .box 元素的样式不生效。而另外一个email的标签，却由于type 的属性值不区分大小写，所以它的样式能生效。这并非什么重大发现，只是一些你之前可能没留意到的。