了解 CSS :focus-within 伪类 CSS :focus-within 伪类选择器和 IE8 就开始支持的:focus 可以说是近亲，区别在于:focus 表示当前元素处于 focus 状态时候干嘛干嘛，而:focus-within 表示当前元素或者当前元素的子元素处于 focus 状态时候干嘛干嘛。 举个例子： 表示仅仅当 处于 focus 状态时候， 元素 outline 出现。换句话说，子元素 focus… »

填充的两种规则 只要是路径填充，都有两种规则 nonzero 和 evenodd，无论是 SVG 中的路径填充，还是 Canvas 中的路径填充，如果还有其他和路径相关的技术（甚至设计软件），也离不开这两种填充规则。 如果我们用 3 个点，连成一个三角形，则这两种填充规则没什么区别，如下对比 如果是两个三角形，并且发生重叠，差异就出现了，如下： 交叉点 填充规则的关键，就是确定复杂路径构成的图形，哪些是内部，哪些是外部。内部则填充，外部则透明。 “nonzero… »

假设页面中有下面这一段 HTML： 点击“返回顶部”这个文字链接的时候，页面就会“唰”地瞬间定位到浏览器顶部。 浏览器已经开始支持原生平滑滚动定位，CSS scroll-behavior 属性和 JS scrollIntoView()方法都可以。 CSS scroll-behavior 与平滑滚动 scroll-behavior:smooth 写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。 语法 初始值是’auto’。 凡是需要滚动的地方都加一句 scroll-behavior… »

所谓“层叠规则”，指的是当网页中的元素发生层叠时的表现规则。 默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生，有点儿类似于真实世界中“论资排辈”的感觉。 z-index 只是 CSS 层叠规则中的一部分 在 CSS 世界中，z-index 属性只有和定位元素（position 不为 static 的元素）在一起的时候才有作用，可以是正数也可以是负数。理论上说，数值越大层级越高，但实际上其规则要复杂很多。 但随着 CSS3 新世界的到来，z… »

功能简述 一般翻译软件都有划词翻译功能，例如有道桌面词典的桌面划词翻译功能： 在 web 页面上，我们也是可以实现类似的效果的：划词 → 显示提示 → 分享。这就是本文要展示的内容。 效果与 demo 结语及补充 其实呢，此方法不仅支持新浪微博，支持企鹅微博（腾讯微博），狐狸微博（搜狐微博），也是可以的，只要根据各个微博分享页面的 API 地址，将 window.open()中的地址换换就可以了。 »