原理

  • 说起 background-clip ,可能很多人都很陌生。Clip 的意思为修剪,那么从字面意思上理解,background-clip 的意思即是背景裁剪。

    我曾经在 从条纹边框的实现谈盒子模型 一文中谈到了这个属性,感兴趣的可以回头看看。

    简单而言,background-clip 的作用就是设置元素的背景(背景图片或颜色)的填充规则

    box-sizing 的取值非常类似,通常而言,它有 3 个取值:

    {
        background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)
        background-clip: padding-box; /
  • 开始使用 conic-gradient 角向渐变

    感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。

    conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟:

    • linear-gradient : 线性渐变
      lg
    • radial-gradient : 径向渐变
      rg

    说这两个应该还是有很多人了解并且使用过的。CSS3 新增的线性渐变及径向渐变给 CSS 世界带来了很大的变化。

    conic-gradient ,表示角向渐变,另外一种渐变方式,给 CSS 世界带来了更多可能。

    下面进入正文,本文中所有示例,请在高版本 Chrome 内


  • 15、reset.css 知多少?

    大部分的时候,作为前端,我们在写 CSS 样式之前,都知道需要添加一份 reset.css ,但是有深究过 reset.css 每一句的人恐怕不多,其实其中也是有很多学问的,知己知彼,真正厘清它,对提高 CSS 大有裨益。

    reset.css

    先来看看早先 YUI 的一个版本的 reset.css,这是一份历史比较悠久的 RESET 方案:

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote
  • CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式

    混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

    我个人对混合模式的理解也十分浅显,本文只是带领大家走进 CSS 混合模式的世界,初浅的了解混合模式及尝试使用它制作一些效果。

    mix-ble

  • (本文未完成...)

    在介绍新的 CSS 属性 contain 之前,先简单介绍一下什么是页面的重绘与重排。

    发现之前已经描述过很多次了,可以看看这个提高 CSS 动画性能的正确姿势。

    OK,下面进入本文正题,

    contain 为何?

    contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

    The contain property allows an author to indicate that an element and its contents are,

  • 2/7