图片加载失败的默认UI是比较丑陋的，因为前端开发会使用出错图进行替换，但是这种做法会隐藏图像的内容信息，有没有什么办法在CSS样式美化同时显示图像的信息呢？本文就介绍我摸索出来的应对此场景的最佳实践技巧，希望可以对您的工作与学习带来帮助。
文章关键字 ‘伪元素’
图片加载失败后CSS样式处理最佳实践
2020年10月24日，星期六小tips: 如何借助content属性显示CSS var变量值
2019年05月28日，星期二
CSS ::backdrop伪元素是干嘛用的？
2018年12月22日，星期六
周知：CSS -webkit-伪元素选择器不再导致整行无效
2018年12月17日，星期一
通常，如果选择器链或组中有无效的伪元素或伪类，则整个选择器列表无效。如果伪元素（但不是伪类）具有-webkit-前缀，那么对于Firefox 63+，Blink、Webkit和Gecko浏览器认为它是有效的，而不会使选择器列表无效。
CSS蛋疼应用之：数据上报和HTML验证
2018年12月6日，星期四
介绍两个我觉得比较蛋疼但有意思的CSS应用，一个就是纯CSS实现数据上报，用户行为跟踪；另外一个就是纯CSS实现HTML验证，并且在页面上进行提示。比较有脑洞，有想法，虽然以后估计用不到，但是，其中新奇的思路说不定对于我们开阔眼界很有帮助。
腾讯微云黑色遮罩引导蒙版更好的CSS实现方式
2016年03月7日，星期一网站有一些改动的时候，为了让用户熟知新的操作位置，往往会增加一个引导，常见的方式就是使用一个黑色的半透明蒙版，然后需要关注的区域是镂空的。
然后上周五我去微云转悠的时候，也看到了引导层，于是职业病又犯了，去学习下别人是怎么实现的。下面是观测的结果：
为了实现镂空蒙层效果，作者发挥了小时候拼积木的才能，使用两层HTML结构，内层使用5块独立区域拼接形成，至于中间镂空的区域的阴影则是使用的图片实现的。
我们实际上只需要一层标签，一层空标签就可以实现我们的效果，且不需要图片……
CSS之before, after伪元素特性表现两则
2015年04月19日，星期日伪元素之所以称之为“伪元素”一定是有其原因的，本文就举两个特征例子，展示下伪元素跟普通元素，到底有哪些不一样的地方。
依然，有Demo、有截图，有源代码展示。总之，希望本文的内容能够对您的学习有所帮助。
CSS counter计数器(content目录序号自动递增)详解
2014年08月26日，星期二CSS计数器不是什么新鲜玩意了，早在10年春暖花开的时候，我写的“CSS content内容生成技术以及应用”一文就要提到，不过当时是作为其中一员介绍。就像例行的溜新同事一样，虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象，但由于介绍的同事茫茫多，我只是其中一员。很自然，个把月之后，我就会被无情的淡忘，除了那依稀的面庞，因为毕竟长得还算比较抽象。
然而，CSS计数器的斗量显然不是短短几句介绍能够显露的，所谓人不可貌相。今天，就大肆笔墨，好好地全面地介绍了下CSS计数器，确实有很多知识点，确实有很多不太好理解的地方，确实有很多会踩坑的地方，果然深不可测。不过，本文有着详实的文字，丰富的截图，完全的demo，必要的源代码展示。相信本文的内容会对你的学习有所帮助的！
CSS3 box-shadow盒阴影图形生成技术
2013年11月29日，星期五理论上，CSS3 box-shadow盒阴影可以生成任意的图形，小月格格的靓照，含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意，美女靓照一个都不少。说不定，你会有别样的收获哦！【挑眉】
first-line伪类实现兼容IE6/IE7的单标签多背景效果
2013年07月5日，星期五background+filter滤镜可以实现低版本IE浏览器下的多背景效果，:first-line伪类也是可以实现的，本文就将介绍这种技巧。有表格数据、有源代码展示，有demo页面，有效果截图，总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用