先从一个需求说起

之前在做界面组件的时候，有很多地方都用到了边框，我都是顺手就打上了 1px 的宽度。但是 MR 上去以后，组里的大佬问我有没有听说过一个极细边框的技术，我就赶紧去 google 了一下，发现这个概念原来很早就有了。早在 2014 的 WWDC 上面 Ted O’Connor 就讨论过有关 “retina hairlines” 的技术，可以实现比 1px 还细的边框。

背景

需求预沟通

• 产品：我们需要做一个 IM，和微信一样
• 我：打扰了，走错片场了，你们继续，，，，，，，
• ....
• 我：这个需求虽然不合理，但是我还是接了。。。。。。

背景

某天老板在群里反馈，英文单词为什么被截断了？ 

很显然，这是我们前端的锅，自行背锅。这个问题太简单了，css 里加两行属性，分分钟搞定。

开心的提交代码，刷新页面。我擦，怎么还是没有断词？不可能啊！！！ 难道这两个属性有什么兼容性问题或者有什么限制条件？为了不搬石头砸自己的脚，还是去深入了解一下。

熟悉前端的人都会听过 css 的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。

1. 伪类与伪元素

先说一说为什么 css 要引入伪元素和伪类，以下是 css2.1 Selectors 章节中对伪类与伪元素的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

前言

提到 rem，大家首先会想到的是 em，px，pt 这类的词语，大多数人眼中这些单位是用于设置字体的大小的，没错这的确是用来设置字体大小的，但是对于 rem 来说它可以用来做移动端的响应式适配哦。

兼容性

前言

现在设计师同学越来越高大上了，纯色背景已经不能满足人民群众日益增长的物质文化需要了，必须整渐变背景 o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十 K 的图片，这怎么行。。。

还好我们有 CSS 第三代！这次就来唠唠 CSS3 Gradient(/ˈgreɪdɪənt/) 的用法。

每次必说题外话

话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个 CSS 问题，一直很喜欢 CSS 的，能 CSS 解决的问题绝对不用 JS，于是就抽时间整整看。

什么是斜线拼接

回到本文主题上，” 斜线拼接“ 是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

眼力好的筒子应该就能发现，上面这张图是两个帅锅拼接在一起的，看中间的斜线。

但是呢，刚接到这个需求的时候，开发是抓狂的—— 第一反应就是用 canvas 画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨 JS，O__O "…

不过依稀记得，CSS 貌似有个遮罩的特性，可以实现图片的部分显示的效果的。

日常开发中，我们常用:before,:after 来实现一些效果，比如

     虽然现在互联网的网速越来越快，但永远都跟不上我们生活节奏的加快。资深网瘾少女表示，这世上最刺眼的不是阳光，而是“ 正在加载”；最长的不是周杰伦的电影，而是“ 正在加载”；最痛心的事情不是你不爱我，而是“ 正在加载”（语文老师告诉我排比要至少写三句）。

这是为什么呢

为什么 loading 让我们如此痛苦呢？

因为，我们看到的 loading 是这样的是这样的颜值再高一点的是这样的。

这就是为什么要叫他们“ 菊花”，就因为长得丑啊喂！

我们要在这个看脸的世界活下去！！！

CSS 类名总是作用在同一的全局作用域里面。

任何一个跟 CSS 有长时间打交道的开发者，都不得不接受 CSS 那具有侵略性的全局特性，明显地这是一种文档流时代的设计模型。而对于今天现代 web 应用，更应该积极提出一种更健全的样式环境。

每一个 CSS 类名都有可能与其它元素产生的意想不到副作用，又或者产生冲突。更令人吃惊的是，我们的 class 的效果可能在全局作用域的互相影响下（原文这里比喻为全局唯一性战争），最终在页面上产生很少的效果或者根本没有效果。

任何时候我们改变一个 CSS 文件，我们都需要小心翼翼地考虑全局环境是否产生冲突。没有其他前端技术是需要如此之多的规范和约束，而这仅仅是为了保持最低级别的可维护性。