CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，类似于photoshop中的混合模式。应用场景有：图像叠加效果（如multiply正片叠底，融合.jpg图片背景颜色）、文字与背景融合（如 difference 实现高对比文字）、动态视觉设计（如 overlay 创建光效）。
样式语法：
mix-blend-mod: <blend-mode...
解决Less下使用CSS calc函数px按%计算导致结果错误的问题
在Less中使用CSS函数calc()动态计算长度值时出现错误，原本是px像素单位的数值被当成%百分比单位来计算，导致计算结果不正确。
Less代码：
.calc {
width:calc(100% - 90px);
}
编译后的CSS代码：
.calc {
width:calc(10%);
}
原因是less对代码进行了转换编译，解决方法是使用 “~''” 符合禁止对其编译，让...
控制CSS animation动画暂停或运行的样式属性animation-play-state代码
animation 动画是经常会使用到的CSS3样式属性，通常是用来运行 @keyframes 定义动画，在网页开发过程中，想暂停 animation 动画要怎么做？CSS3 提供了 animation-play-state 属性，该属性的作用是运行或者暂停动画，支持该属性的浏览器版本 Chrome 43+(4.0 -webkit-)、IE10+、Firefox 16+(5.0 -moz-)、Safari 9.0+、Opera 3...
纯CSS实现动态加载矩形边线的动画效果
制作web动画效果，通常会想到使用svg或者canvas甚至flash，其实一些简单的动画效果，使用css3属性transition就可以实现，比如动态显示矩形边框线的效果，实现原因是利用过渡效果时宽高显示的时间差。
示意图
实现代码
HTML代码：
<div class="border">
</div>
CSS代码：
.border...
IE浏览器加载rem自适应网页元素尺寸显示异常
使用rem制作等比例缩放自适应网页，在IE浏览器下会出现页面加载完成后，使用了 rem 单位的网页元素尺寸显示异常的问题。原因是给body标签的 font-size 属性定义了固定大小的默认值，解决方法是把 font-size 属性值设置为 100%，直接删除该属性。
示例：
原代码
body {
font:normal 16px/1.875em 'Arial';
}
修改为
b...
使用CSS text-shadow实现文字描边效果的代码
通过 text-shadow 属性水平、垂直阴影的偏移值可以实现文字的描边效果，兼容 Chrome 4.0+、IE10+、Firefox 3.5+、Safari 4.0+、Opera 9.6+ 浏览器，加上私有属性前缀，可能兼容的版本还可以提高，不过我没有测试。
网页效果：
WWW.NEIRONG.ORG
CSS：
-o-text-shadow: 1px 0px 0px #f00, 0px 1...
实现IE10/IE11支持object-fit属性的插件bideo.js
在响应式网页开发中 object-fit 属性是极为常用的一个css属性，遗憾的是IE浏览器全系列都不支持 object-fit 属性，但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。
PS：不支持 IE9 和 Edge
插件下载：https://github.com/rishabhp/bideo.js
插件使用
HTM...
CSS3实现歌词进度文字颜色填充变化动态效果
播放音乐时，歌词会随歌曲的进度逐渐填充颜色，不是逐字改变颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。
这个效果通过CSS3可以实现。
实现思路：
1、background填充一个背景颜色，以及要变化的颜色
2、-webkit-background-clip:text;裁剪出文字的背景，即是楼空文字的意思
3、-w...
CSS3响应式自适应尺寸视窗单位vw、vh详解
vw、vh、vmin、vmax是CSS3新增的视窗单位，同时也是相对单位，它相对视窗（Viewport）大小的百分比。
什么是视窗？
视窗即Viewport，是浏览器实际显示内容的区域，不包括工具栏、地址栏、书签栏。
视窗单位说明
vw - 视窗宽度的百分比，如1vw即浏览器可视窗口宽度的1%，10vw即窗口宽高的10%
vh - 视窗高度的百分比，如1vh...
使用CSS3实现SVG路径描边动画效果入门教程
不依赖javascript，直接使用纯css实现svg的描边绘制动画效果，效果演示动画。
基础知识：
SVG中有个比较重要的属性分支stroke，中文软件中称为“描边”。和stroke相关的属性还有下面这些：
1、stroke 表示描边颜色。表示颜色的名字不是stroke-color，只是单纯的stroke。它的值官方称为“paint”，可选值的类型包括none...
通过纯css3代码实现六边形边框
最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible;
经过旋转肯定有超出的部分，因此对3个div都设置overflow:hid...
IE9浏览器对CSS3的支持情况参考
以下整理的IE9对CSS3支持情况仅限初期发布的IE9版本，其余版本由于改进或修复的原因，可能已经支持之前不支持的CSS3属性，所以以下数据仅供参考。
更准确的支持情况请访问：https://docs.microsoft.com/en-us/previous-versions//cc351024(v=vs.85)
IE9对CSS3属性的支持情况：
C...
