前一阵做需求时，有个小功能实现起来废了点脑细胞，觉得可以记录一下。 产品的具体诉求是：用户点击按钮进入详情页面，详情页内的卡片标题内容过长时，标题的前后两端正常展示，中间用省略号...表示，并且鼠标悬

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动…

本文将介绍如何实现Element 2 组件Progress的自定义渐变色功能，耐心读完，相信会对您有所帮助。

清除浮动很明显也可以清除，但为什么不用display:block呢？实际我们这个样式解决了两个问题，清除浮动，利用伪元素，单一功能做清除，display设置为块元素即可，所以display:block

Vite项目屏幕适配的两种方案：1、基于px转rem的适配方案。 2、基于scale等比缩放的适配方案。

说到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋

position 的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性 一、sta

CSS为定位和浮动提供了一些属性，利用这些属性可以建立列式布局，将布局的一部分与另外一部分重叠。CSS定位的基本思想就是允许定义元素相对于正常位置应该出现的位置；或者相对于父元素、另一个元素、浏览器窗