#css 黑科技 * border-radius 很多开发者估计都没有正确认识这个`border-radius`，因为基本上很多人都是这么用的： ```css .box { border-radius: 4px; } ``` 稍微高端一点的是这样的： ```css .box { border-radius: 4px 6px 6px 4px; } ``` 然而，终极黑科技是这样用的： ```css .box { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; } ``` 对，它可以赋8个值，没见过？不着急，具体的解释是这样的： 斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别代表四个不一样的方向。 `outline-offset` * 相信很多开发者在写CSS的时候对下面的语句会很熟悉： ```css input { outline : none; } input:focus { outline : none; } ``` 这就是将`input`输入框去掉默认的蓝线框的方法。其实，这里还有说一个就是，CSS中还有一个`outline-offset`属性，在这个属性中，你可以设置默认线框的距离；像这样 ```css input { outline-offset: 4px ; } ``` 调节该属性值的大小你就可以看到`outline`的距离变化了。 * 类的声明 对于下面的类的声明，可能大家都很熟悉： ```css .col-8 { } ``` 这当然没什么，但是如果你这样写呢： ```css .♥ { color: hotpink; } .★ { color: yellow; } ``` 嗯，看起来怎么样，你是可以这么用的： ```html <div class="♥ ★"></div> ``` 只要是`Unicode`的，你都可以这么来声明你的类。 * 选中连续的几个元素 ```css ol li:nth-child(n+7):nth-child(-n+14) { background: lightpink; } /** Or Safari Way **/ ol li:nth-child(-n+14):nth-child(n+7) { background: lightpink; } ``` 上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。 * 伪类设置单标签 html中有几个常见的单标签：<br> ,<hr>等。具体可以查看这里： ``` http://www.w3.org/TR/html5/syntax.html#void-elements ``` 下面的示例是实现对<hr>的修饰。 ```css hr:before { content: "♪♪"; } hr:after { content: " This is an <hr>element"; } ``` 没错，关键就是使用`:before`和`:after`这两个伪类。在这里，顺便说一点就是，其实你还可以用这两个伪类来修饰`<meta>` 和 `<link>`，不过这个前提是，你把这两个的display属性设置为： `display: block` * 属性区分大小写 假如我们在写html的时候有类似下面的代码： ```html <div class="box"></div> <input type="email"> ``` 然后我们用属性选择器进行CSS修饰： ```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"`并不会影响到 `<div class="box"></div>`,而第二个type="EMAIL"还是会正常修饰`<input type="email">`。所以在使用属性选择器的时候，注意大小写问题。 * empty-cells 其实在table中，你可以使用`empty-cells`这个属性来指定相应的样式，比如： ```css table { empty-cells: hide; } ``` 上面这一行声明就可以将table元素中的空单元格隐藏起来。 * border-image 其实这个在开发中可能会比较少见到，如果不是我特意去看文档，真心不会发现还有这个border-image，没错，就如名字的意思一样，你可以给`border`指定`image`： ```css .border-image-example { -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat; -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat; border-image: url(border-image.jpg) 45 20 45 30 repeat; } ``` * text-decoration 在习惯了对`text-decoration`赋值为none之后，我们需要重新来认识一下这一位小伙伴了，它其实是可以接受三个变量声明： ```css a { text-decoration: overline aqua wavy; } ``` 这三个分别是代表：`text-decoration-line`， `text-decoration-color` 和 `text-decoration-style` * clip 可能很多人在刚开始使用clip的时候都是这样写的： ```css .example { clip: rect(110px, 160px, 170px, 60px); } ``` 然后很惊讶地发现竟然没有起作用，为什么呢？所以在这里需要注意的地方是clip是只在position为absolute或position为fixed时候起作用的。 * ::first-letter 这个感觉比较神奇，虽然对于我们常用CSS修饰中文文本可能没有很大的用处，不过我看到这个时候其实还是觉得比较意外的，竟然还有这个东西： ```html <div class='text'> I am sample text </div> ``` 然后CSS可以这样写： ```css .text::first-letter { color: blue; background: yellow; } ``` 第一个字母I就会被修饰到，很神奇。暂时就补充这么多...