本周工作中遇到类似颜色主题的问题，在查资料的时候，看到这个视频，觉得讲得很清楚，而且趣味性丰富，所以想拿出来讲讲这个很有意思的主题。 1. 精读 Web 内容无障碍指南的对比度指的是 W3C 组织发布的 《Web Content Accessibility Guidelines…

CSS变量又叫CSS自定义属性，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上CSS变量，可能其自身隐藏的魅力，让笔者对它刮目相看。 谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。 看完可能会觉得使用CSS变量的代…

优点：节省标签，将可修改的内容暴露在html标签上。 缺点： content的内容无法被选择也无法搜索到，不适合放关键文字。 动画曲线由4个点组成，p0和p1的坐标固定为：(0，0) 和 (1,1)。p2和p3两个点任意拖动就可以组成我们的动画曲线了。 其实animate.cs…

一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现，我们可以像优秀的开源框架bootstrap那样，通过维护一个_variables.scs…

如果当年的 CSS 预处理器变量对于初入前端的我来说是开启了新世界的大门，那么 CSS 变量对于我来说无疑就是晴天霹雳。其功能不但可以优雅的处理之前 js 不好处理或不适合的业务需求。更在创造力无穷的前端开发者手中大放异彩。 在前端的领域中，标准的实现总是比社区的约定要慢的多，…

CSS 变量又称为 CSS 自定义属性，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);） 为什么选择两根连词线（--）表示？…

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。…

最近有个需求需要实现带有图片背景的正六边形，这里记录一下我自己实现的方法。 我项目里的最终效果大概是这样子的，这里我们只演示实现一个正六边形。 这里为了得到一个正的六边形，两个矩形旋转的角度必须为-60deg和60deg，以及矩形高宽比必须是Math.sqrt(3) : 1， …

传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自己如何实现，如何才能用最少的代码最优雅的实现呢？是否可以推翻传统的实现，使用纯css的某些特效实现呢？ 把上面提到的三个属性放在一起就实现了平稳缓慢的滚动，再借助js移…