随笔分类 -  css

position: sticky 修改吸顶样式
摘要：<div id="parent"> <br /> <br /> <br /> <br /> <div class="myElement">Hello!</div> </div> #parent { height: 2000px; } .myElement { position: sticky; to 阅读全文
posted @ 2022-11-04 19:44 生命在于折腾Up 阅读(716) 评论(0) 推荐(0)
给某个类自定义反转样式
摘要：@at-root [dir='rtl'] & .hide-types-icon { transform: rotateY(180deg); } 阅读全文
posted @ 2022-09-21 17:59 生命在于折腾Up 阅读(59) 评论(0) 推荐(0)
css实现带圆角梯形
摘要：<div class="box-item-num white"> <span class="num">x <b>12</b></span> </div> &-num { width: 46px; height: 26px; font-size: 12px; position: absolute; l 阅读全文
posted @ 2022-09-01 10:56 生命在于折腾Up 阅读(3254) 评论(0) 推荐(0)
双层数组异步处理
摘要：需求为data数据中，多个数组，数组中的项对应一个盒子，盒子需要有逐个开启的动画。如下例子为 Vue3 const itemArr = Array(15).fill(1) const itemArr2 = Array(10).fill(2) const dataArr = [ { title: 'C 阅读全文
posted @ 2022-08-30 14:55 生命在于折腾Up 阅读(110) 评论(0) 推荐(0)
css 设置单行省略号；css设置多行省略号
摘要：单行省略号 .demo{ white-space:nowrap; /* 不换行 */ overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden; 阅读全文
posted @ 2022-08-07 18:25 生命在于折腾Up 阅读(785) 评论(0) 推荐(0)