巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs

传统网页的呈现是基于像素单位的，所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说，放大像素逻辑的图片，必然导致可视质量下降（信息失真）。所以我们往往会使用技术手段去规避失真，如： 这篇文章将会简单的提及以上几点，并介绍一种通过 CSS Background…

不管你是一个多么有经验的开发人员，你都想让你的生活尽可能的简单。正确的工具可以帮助您完成此任务。你的能力取决于你使用的工具，所以花点时间挑选适合你需要的工具是明智的。 在本文中，我将讨论每个web开发人员都可以使用的一些工具，以便使你的工作更轻松、更高效。 1. Transit…

在 CSS flexbox 布局出现以前，如果要控制 HTML 元素的布局，要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐，稍一不注意，就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了：要么手动计算高度然后算出中心点，要么用 line-height 和 …

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图： 图中的内层是content依次是padding border margin。通常我们设置背景时就是内容…

本文是2016年的最后一篇文章，主要是将一些CSS细节问题整理一下。 background-position取值为百分比的计算方式 margin相邻折叠问题 position的absolute和relative定位top、left、right、bottom问题 覆盖样式问题 1…

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。 ease-in 规定以慢速开始的过渡效果。 ease-out 规定以慢速结束的过渡效果。 ease-in-out 规定以慢速开始和结束的过渡效果。 linear 动画从头到尾的速度是相同的。 delay属性：用于将动画…

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没…

这段时间在豆瓣上看有什么剧的时候，发现豆瓣的loading动画还挺棒的。所以决定模仿着来写一个。 我通过CSS3配合SVG来完成这次模仿豆瓣的loading动画。没用过SVG的也不用慌，我下面会写出相应的属性方便你去理解。因为这个真的超简单。那么我们就直奔主题吧 我指定了一个宽…