常用CSS技巧

引言 这几天项目结测，老板觉得我们没事干，告诉我首页的文字太难看，想让我自己设计设计。好，既然让我干UX的活，那我就整个花里花哨的动画，闪瞎他！ 于是，我用文字渐变实现了非常炫酷的文字动画： 确实闪瞎

昨天开发，老本提了一个有趣（zhi zhang）的需求，希望一个背景图能根据标题内容的高度，智能调整展示位置： 当标题内容较少时，背景图要靠右居中展示，并根据区域上下裁剪，从中间部分开始显示：

前段时间在掘金看到一篇博文，作者提到其公司不允许使用 ECharts，但项目中需要展示简单的圆环图。 于是她用 Canvas 实现了需求，效果也比较不错。评论区也有不少大佬分享了更轻量、更优秀的方案，

文字超出换行应该是大家项目中高频的css样式了，它也是非常容易出现样式bug的一个地方。 分享一下我工作中遇到的问题。前几天开发代码的时候，突然收到两个测试提的bug：

背景简介 大家好，我是石小石！最近开发中遇到这样一个需求： hover改变样式，边框由原来的1px变成2px。这太easy了！ 但实际做完后，我们会发现一个问题，样式不够丝滑

日常开发中，我们经常会遇到`hover文本`，显示其全部内容的需求。但是`原生的title属性`有两个很大的缺点

背景简介 在前端开发中，我们经常会遇到这样的一个需求：hover一个svg图片，svg展现不同状态的样式。 大家常见的写法就是引入两个颜色状态的svg，然后通过v-show控制显影 这样实现不是不可以

背景简介 这几天代码评审，领导无意中看到了我本地代码的控制台，被我花里胡哨的console打印内容吸引了！ 老板看见后，说我这东西有意思，花里胡哨的，他喜欢！

需求简介 这几天接了个新项目，需要实现下图中左侧边栏的菜单切换。这种功能其实就是一个折叠面板，实现方式多种多样。 实现上面的功能，无非就是一个v-show的事儿，但没有过渡，会显得非常生硬。想添加一些

需求背景 这几天开发项目，做了一个可滚动的表格，表格用的是公司的组件。正常情况下，一切滚动行为正常。 但，当我通过页面内的操作改变表格高度时，bug出现了！如图，可以清楚的发现，滚动条滚动异常了！有一

在前端开发中，我们经常遇见这样的开发需求，实现多行排布的卡片，这些卡片宽度一般是固定的， 并且在不同大小的屏幕宽度下自动换行。

在前端开发中，我们经常会遇到这样的布局：在一个容器中，排布有两个元素，A元素宽度固定，B元素宽度自适应，如下图： 我们的CSS也能随手捏来 上述代码中，我们使用flex: 1