drop-shadow() 设置图片的阴影 使用 CSS3 滤镜filter中的drop-shadow实现纯色图标active切换颜色 drop-shadow(offset-x offset-y blur-radius spread-radius color) 具体语法参考：MDN 实现代码： <!DOCTYPE html> <h…
首先在出现层级问题的元素上，z-index的大小通过translateZ来设置层级关系： transform: translateZ(自身z-index的数值px) 原先的z-index最好继续保留，因为还要考虑到非IOS用户 然后在父元素上添加： transform-style: preserve-3d; // 父元素必须加这个 方案来自：苹果手…
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使馆下半旗致哀，全国停止公共娱乐活动，4月4日10点开始，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。 想到以往默哀日访问网站时发现整站会变成全灰，即想到如果立即开始开发、设计图修改等工作也…
不可思议的纯CSS导航栏下划线跟随效果 先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我…
样式的优先级 多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。 一般情况下，优先级如下： 外部样式 <内部样式 <内联样式 有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 示例如下： <head> <styl…
下面分享来自 阮一峰的网络日志 的一片很好的教程文章： 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应…