在Less中使用CSS函数calc()动态计算长度值时出现错误，原本是px像素单位的数值被当成%百分比单位来计算，导致计算结果不正确。 Less代码： .calc { width:calc(100% - 90px); } 编译后的CSS代码： .calc { width:calc(10%); } 原因是less对代码进行了转换编译，解决方法是使用 “~''” 符合禁止对其编译，让其原样输出即可。 修改代码如下： .calc { width:~'calc(100% - 90px)'; } 编译后的代码如下：...

animation 动画是经常会使用到的CSS3样式属性，通常是用来运行 @keyframes 定义动画，在网页开发过程中，想暂停 animation 动画要怎么做？CSS3 提供了 animation-play-state 属性，该属性的作用是运行或者暂停动画，支持该属性的浏览器版本 Chrome 43+(4.0 -webkit-)、IE10+、Firefox 16+(5.0 -moz-)、Safari 9.0+、Opera 30+(12.0 -o-)。 语法 animation-play-state: paused|running; 参数 ...

制作web动画效果，通常会想到使用svg或者canvas甚至flash，其实一些简单的动画效果，使用css3属性transition就可以实现，比如动态显示矩形边框线的效果，实现原因是利用过渡效果时宽高显示的时间差。 示意图 实现代码 HTML代码： <div class="border"> </div> CSS代码： .border {position: relative; width:300px; height:300px;} .border:before, .border:afte...

使用rem制作等比例缩放自适应网页，在IE浏览器下会出现页面加载完成后，使用了 rem 单位的网页元素尺寸显示异常的问题。原因是给body标签的 font-size 属性定义了固定大小的默认值，解决方法是把 font-size 属性值设置为 100%，直接删除该属性。 示例： 原代码 body { font:normal 16px/1.875em 'Arial'; } 修改为 body { font:normal 100%/1.875em 'Arial'; } 如果想要给网页定义默认字体大小，又不想影响rem，在bod...

通过 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 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; -ms-text-shadow...

在响应式网页开发中 object-fit 属性是极为常用的一个css属性，遗憾的是IE浏览器全系列都不支持 object-fit 属性，但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。 PS：不支持 IE9 和 Edge 插件下载：https://github.com/rishabhp/bideo.js 插件使用 HTML代码： <!-- 引入插件 --> <script src="bideo.js"></script> <!...

播放音乐时，歌词会随歌曲的进度逐渐填充颜色，不是逐字改变颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。 这个效果通过CSS3可以实现。 实现思路： 1、background填充一个背景颜色，以及要变化的颜色 2、-webkit-background-clip:text;裁剪出文字的背景，即是楼空文字的意思 3、-webkit-text-fill-color:transparent;把裁剪缕空的文字弄透明，这样就可以通过缕空的形状看到背景颜色，这时背景颜色就是字体的颜色 ...

vw、vh、vmin、vmax是CSS3新增的视窗单位，同时也是相对单位，它相对视窗（Viewport）大小的百分比。 什么是视窗？ 视窗即Viewport，是浏览器实际显示内容的区域，不包括工具栏、地址栏、书签栏。 视窗单位说明 vw - 视窗宽度的百分比，如1vw即浏览器可视窗口宽度的1%，10vw即窗口宽高的10% vh - 视窗高度的百分比，如1vh即浏览器可视窗口高度的1%，10vh即窗口高度的10% vmin - 选择当前 vw 和 vh 中的最小值，最小值被均分为100单位的vmin...

不依赖javascript，直接使用纯css实现svg的描边绘制动画效果，效果演示动画。 基础知识： SVG中有个比较重要的属性分支stroke，中文软件中称为“描边”。和stroke相关的属性还有下面这些： 1、stroke 表示描边颜色。表示颜色的名字不是stroke-color，只是单纯的stroke。它的值官方称为“paint”，可选值的类型包括none、currentColor、<color>。 none - 表示没有颜色； <color> - 表...

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible; 经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。 注意： 如果不对第3层div设置v...

以下整理的IE9对CSS3支持情况仅限初期发布的IE9版本，其余版本由于改进或修复的原因，可能已经支持之前不支持的CSS3属性，所以以下数据仅供参考。 更准确的支持情况请访问：https://docs.microsoft.com/en-us/previous-versions//cc351024(v=vs.85) IE9对CSS3属性的支持情况： CSS3属性 IE9支持情况 之前版本IE支持情况 ...

Flexbox 是是 CSS3 引入的新的布局模式，全称是 flexible box （意思是“灵活的盒子容器”）。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式： 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元...