深入介绍 CSS border-image 的历史，特性以及在某些场景下无可替代的作用，独家内容，不容错过。
文章关键字 ‘gradient’
被低估的border-image属性
2022年02月25日，星期五密码强度效果最佳实现一定是HTML meter元素
2021年11月14日，星期日
几种CSS渐变背景图片transtion动画方法
2018年03月25日，星期日background-image不支持CSS3 transition，因此，当CSS3 gradient渐变作为背景图片存在的时候，直接设置transition是不会有过渡效果的，那该怎么办呢？
CSS, SVG和canvas分别实现文本文字纹理叠加效果
2018年02月27日，星期二本文这里所说的叠加，就是混合模式中的叠加，也就是说，本文要实现的效果是，文字本身的颜色和纹理进行叠加，而非直接填充纹理。
CSS, SVG和canvas都能实现类似的效果，我们一个一个来看一下……
CSS3 linear-gradient线性渐变实现虚线等简单实用图形
2017年10月27日，星期五我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚至，理论上，任意彩色jpg图片都是可以使用CSS3渐变背景实现的。
当然我们实际开发的时候，是不会使用CSS3渐变来模拟一张图片的，更多是用来生成一些简单实用的图形。
本文就将通过实现虚线，三角以及加号减号等案例，展示下CSS3 linear-gradient线性渐变要图形生成技巧。
解决文字和text-decoration:underline下划线重叠问题
2016年11月23日，星期三CSS text-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。
有没有什么办法让下划线不要靠得这么近，或者文字可以完整清晰地显示呢？
有，方法还不少……
巧用浏览器CSS属性值的不兼容向下兼容hack技巧
2016年10月25日，星期二CSS3中有很多好的特性，例如box-shadow盒阴影，但是，唯一的问题是IE8浏览器不支持，如果是对外的PC站点，则IE8浏览器不可不顾，尤其一些受众广泛的网站。
怎么办呢？我的做法往往是这样，IE9+浏览器使用box-shadow阴影，而IE7，IE8浏览器使用border线框。
我们一般采用一些CSS hack技巧，例如使用:root伪类，从功能上满足了我们的开发需求，但提高了我们的CSS权重，很容易增加我们CSS代码的复杂度，那有没有更好的实现呢？
小tips: CSS3 webkit下彩条文字效果实现
2015年03月15日，星期日此效果用的是以前介绍过的两个技术实现，第一个就是CSS3实现纹理图案背景，第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。
深入理解CSS3 gradient斜向线性渐变
2013年09月6日，星期五CSS3斜向渐变，看上去好像挺简单。实际上，其远没有你想得那么简单。本文就将逐步揭开其一些复杂、特意的地方。避免您在日后的使用中掉进坑里。
很多自己制作演示图，希望本文的内容能够对您的学习有所帮助。
小tip:CSS3下条纹&方格斜纹背景的实现
2011年04月23日，星期六不好意思，与上篇类似，也是CSS3下的一些技术或者说是效果实现的展示。本文的内容是使用CSS代码创建各种条纹效果。一如既往，有demo，有必要的截图，有源代码展示，同时本文还要相对比较详细的讲解。总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用