最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下： 非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么

单行文本超长打点省略、多行文本超长打点省略。业务上经常会遇到 文本内容超出容器区域进行省略打点展示 的需求，而展示省略也存在多种场景和形式，今天我们来聊一聊这些细节。

在平常项目中会遇到这种文字垂直展示的样式，有几种实现方式，下面和大家分享一下：writing-mode，设置宽度换行，br换行

在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影 可以看到，只有滚动以后才出现阴影。一般情况下，使用

visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。 可以看出，使用 opacity 和 visibility 属性时，元…

通俗来说：就是当用户使用键盘时，tabindex用来定位html元素,即使用tab键时焦点的顺序。 一些复杂的树形结构或者列式结构，如果需要用户操作顺序按照我们预想的书序进行聚焦，可以利用tabindex 值的大小来进行处理。

最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。 不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一

页面布局不一定是四四方方的。历史上，页面中的每个元素都被渲染为矩形，但也可以不是矩形。借助 CSS Shapes 我们可以创建与印刷杂志一样时尚的页面布局，同时又具有网页本身的优势。 CSS Shapes 让你的网页设计突破矩形的限制。所有经典的杂志设计元素，如非矩形文本流和非…