CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考...

1.柱状图柱状图拆分来看的话，是由两个平行四变形和一个矩形组成，如下：为了让柱状图更加美观，我们加上阴影、和渐变色、缓慢上升的效果：效果图代码链接：pen/KKKEQvy2.圆柱圆柱的话就相对比较简单

觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS b…

在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 挑选了✋5个分享给大家, 希望大家喜欢. 参过参数可以只是单/多行. 移动端由于像素密度比的问题, 实际的1px边框看起来比较粗, 如果想要更"细"可以使用下面的代码. 不同像素密度比的设备都可以兼容(pc/手机…

2010 年 5 月，官方推出了一个全新的语法，被叫做 SCSS，意思是 Sassy CSS。这个语法带来了对 CSS 友好的语法，试图弥合 Sass 和 CSS 之间的鸿沟。

CSS变量又叫CSS自定义属性，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上CSS变量，可能其自身隐藏的魅力，让笔者对它刮目相看。 谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。 看完可能会觉得使用CSS变量的代…

1. Clip Paths Clip Paths 能把元素元素“裁剪”成特定形状，使用 CSS 提供的 polygon、circle、ellipse 等这些函数实现。举个例子： Clip paths 可以通过两个属性实现：clip-path 和 background-clip。…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…