![](https://img-blog.csdnimg.cn/20190905182741250.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 71
李小苶
相信不屈不挠的努力,相信战胜死亡的年轻!
展开
-
flex布局
一、主轴(main axis)和交叉轴(cross axis)原创 2021-09-14 08:46:40 · 2556 阅读 · 0 评论 -
flex布局的最后一行?用grid替代flex吧!
当每行数量一样,或最后一行只有一个item的时候,是我想要的效果。但当最后一行数量多余1个且少于前面行数的数量时,就不是我想要的效果了。我希望数量不足时,能保持左对齐的样式,且项目间距与前面相同。原创 2020-10-04 10:33:15 · 1382 阅读 · 0 评论 -
使用element-ui模拟Mac OS滚动条
同样是滚动条,Mac上的就比Windows上的美观很多。但通过css修改滚动条样式,有很多局限,并且兼容性很差。通常情况下的解决方案是将默认滚动条隐藏,再通过样式模拟一个滚动条,并通过js计算滚动条的长度和位置。 而如果在项目中对每个可能出现滚动条的div都模拟滚动条并计算位置,是很庞大的工程,所以出现了很多美化滚动条的组件。其实,在很多项目中引入的element-ui组件库中就有封装好的滚动条,只是在官网上并没有相关文档,所以可能被大部分同学忽略了。 细心的同学可以...原创 2020-08-24 19:48:21 · 852 阅读 · 0 评论 -
纯css实现科技感十足的方格闪烁背景
依然是Vue项目中的效果,GIF图看起来有点卡顿,但实际效果很流畅。代码如下:<div class="main-body"> <span :class="Math.random()<0.3?'animate1':Math.random()>0.6?'animate2':'animate3'" :style="{opa...原创 2019-12-25 19:32:00 · 7202 阅读 · 0 评论 -
Vue中纯css实现弧度时间轴动效
最近做动效比较多,有些好的idea拿出来和大家分享一下。先来看一下效果,带有弧度的时间轴,切换时动画自然过渡。 我是在Vue中实现的,直接上Vue代码了,先来看整体结构<div class="time-shaft"> <ul> <li v-for="i in 10" @click="chooseIndex ...原创 2019-12-22 16:23:51 · 2230 阅读 · 6 评论 -
纯CSS实现网格背景透视效果及原理详解
一、先上效果图二、再上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景</title> <style> body{ overflow: ...原创 2019-12-05 20:21:15 · 1347 阅读 · 0 评论 -
el-dialog遮罩层覆盖弹框(z-index值大的图层在z-index值小的图层下面)
一、问题 如下图所示,本应该出现在遮罩层上面的弹框,出现在了遮罩层下面。 审查元素时看到,遮罩层的z-index为2042。 将遮罩层隐藏,查看弹框的z-index为2043。二、原因 z-index的设置没有问题,但z-index值大的图层反而显示在了下面。从上面两个截图可以看出,遮罩层是插入到body元素上的,而弹框却是在...原创 2019-11-13 18:17:50 · 17095 阅读 · 6 评论 -
常用的css优化样式
一、多行文本超出显示省略号.text{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //表示超出两行后显示省略号 -webkit-bo...原创 2018-12-19 10:50:32 · 403 阅读 · 0 评论 -
高度不固定的自适应布局
一、目标 上面的布局看起来很常见,然而,附加额外条件后就显得有些棘手了。布局需要满足以下条件:顶部区域高度不固定,由其子元素(子元素具有最小高度,但没有最大高度)自由撑开其高度; 左侧区域宽度固定,高度自适应,需要占满显示区域除顶部高度外的剩余高度,且不能超出; 右侧区域宽度高度均自适应,需要占满显示区域除顶部高度及左侧区域宽度外的剩余部分,且不能超出; 纯css实现,...原创 2019-06-24 16:17:23 · 3779 阅读 · 0 评论