此文为译文，在这篇文章中提到了12条我们前端人员在日常工作中不是特别熟悉而又确实可以使用或者浏览器是可以很好支持的CSS技巧，熟知这些点，对我们深入研究CSS有很好的帮助。在本文中，用括号的方式加了一些简单的算是注释的个人理解。 原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/
1、 border-radius属性可以使用'/'（斜杠）标签
不管你信不信，下边是有效的border-radius代码:
.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属性，它的作用完全跟它名字所表示的一样--让你定义它的外框线应该距离元素本身的偏移量。
需要注意的就是，虽然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 不是应用在表格单元的时候，它遵循下边这些基本规则：
6、伪元素::first-letter比你想象中更灵活
伪元素::first-letter可以给元素的第一个字母定义样式，让你实现在印刷中多年前就有的段落效果（drop-cap 印刷的书本中经常能看到的段落中的第一个字比其他字号要大的效果）。
有个好消息就是浏览器快要出一个关于元素的首字母构成的标准了。我最早在 Matt Andrews的twitter上看到有关这个推文，虽然他仅仅是发推文吐槽::first-letter选择器很糟糕。
7、你可以在HTML class列表中使用无效字符作为分隔符
这个概念是Ben Everard在2013年的时候提出，而且我认为它值得推广一下。Ben的观点是用斜杠去将他的HTML类名进行分组，以便他的代码能够更好地阅读或浏览。他的观点认为，转义斜杠是一个无效字符，浏览器会无视它。
所以你的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"> 你也可以使用任何字符（无效的或者空字符）去实现同样的效果： <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 属性来定义动画重复执行的次数：
.example {
animation-iteration-count: 3;
}
这个例子中的整数值将会让这个动画重复执行3次。但你可能不知道这里我们可以使用小数值：
.example {
animation-iteration-count: .5;
}
在这个案例中，这个动画将执行半次（它会在第一次动画循环的中途停止）。
9、动画名称会在动画的简写方式中影响动画的使用
有些开发者可能已经发现了这一点，在规范中对这个也有个提醒。比方说，你有以下的动画代码：
@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个元素。这里你可以使用一个选择器来实现：
ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
这个代码使用了链式结构的伪类表达式。虽然表达式有点难理解，但你可以通过表达式中的数字看到你想要选中的范围。
更详细地解释这个工作的原理：在链式结构的第一部分，表达式为“选中第七个元素及后面的所有元素”。第二部分的意思是“选取第十四个元素及前面的所有元素”。但由于两部分是链接在一起的，每一个限制前一个的范围。所以链式结构的第二部分不允许第一部分超过第十四个元素，然而第一部分又不允许第二部分选取到第七个元素之前的元素。
11、伪元素也适用于一些空元素
如果你跟我一样，尝试过把伪元素附加到一个图片或者表格input标签上。你会发现这样并不生效因为伪元素在非闭合元素上无效。我想很多开发者都认为空元素（即没有闭合标签的元素）都是这样的。但这并不正确。
12、有些属性值在选择器中是不区分大小写的
这是一个不起眼的点，让他们通过下边的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;
}
现在两个属性值都是大写的。在这个示例中，因为class 属性是区分大小写的，所以 .box 元素的样式不生效。而另外一个email的标签，却由于type 的属性值不区分大小写，所以它的样式能生效。这并非什么重大发现，只是一些你之前可能没留意到的。
这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。
那么如何使用CSS实现这个效果？
追踪位置
我们要做的第一件事就是获取到鼠标的位置。
document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft
const y = e.pageY - e.target.offsetTop
e.target.style.setProperty('--x', `${ x }px`)
e.target.style.setProperty('--y', `${ y }px`)
}
1.选择元素，等待，直到用户将鼠标移过它；
2.计算相对于元素的位置；
3.将坐标存在CSS的变量中。
动画渐变
.button {
position: relative;
appearance: none;
background: #f72359;
padding: 1em 2em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px;
span {
position: relative;
}
&::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
&:hover::before {
--size: 400px;
}
}
一、什么是BFC
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念， 从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
二、如何触发 BFC
上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
满足下面任一条件的元素，会触发为 BFC ：
1、浮动元素，float 除 none 以外的值
2、绝对定位元素，position（absolute，fixed）
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
三、BFC布局与普通文档流布局区别
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
下面来说一下BFC的实际使用场景
场景1：解决子盒子都浮动时 父盒子高度不参与计算问题
<style>
.far {
border: 10px solid pink;
width: 300px;
}
.child {
border: 10px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
.far{
overflow: hidden;
}
</style>
<body>
<div class="far">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中。
场景2：box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因
<style>
p {
color: pink;
background: #fcc;
width: 200px;
height:100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p></p>
<p></p>
</body>
要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
<style>
.box {
overflow: hidden;
}
p {
background: green;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<body>
<p></p>
<div class="box">
<p></p>
</div>
</body>
场景3：实现左侧固定右侧自适应等类似布局
<style>
.out{
border: 1px solid red;
height: 200px;
}
.left{
width: 200px;
height: 150px;
background-color: green;
float: left;
}
.right{
background-color: pink;
height: 250px;
overflow: hidden;
}
</style>
<body>
<div class="out">
<div class="left"></div>
<div class="right"></div>
</div>
单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框，一些选中动画是基于jQuery的，你可以挑选喜欢的单选框和复选框应用到自己的网页中去，非常方便。
1、jQuery超级个性化的单线框和复选框
今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。
2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式
今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。
3、CSS3自定义美化复选框Checkbox组合
今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。
4、jQuery实现美化版的单选框和复选框
今天这款是利用jQuery实现的美化版单选框和复选框，样式风格非常简洁清爽，是一款很不错的jQuery按钮插件。
5、纯CSS3 3D按钮 按钮酷似牛奶般剔透
CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。
6、HTML5/CSS3开关按钮 立体3D按钮
今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。
7、CSS3自定义发光Radiobox单选框
今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画。
8、CSS3实现自定义Checkbox动画
今天我们要再来分享一款CSS3自定义checkbox，而且这款checkbox还带有动画效果，当你选中checkbox的时候，会以动画的方式打上一个大大的勾。
以上就是8个非常个性化的CSS3单/复选框，希望对你有所帮助。
本文链接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html
蓝蓝设计的小编 http://www.lanlanwork.com