css
文章平均质量分 66
css技术记录、分享
星野睡不醒
这个作者很懒,什么都没留下…
展开
-
css格式规范stylelint在vscode使用教程(ctrl+s自动智能修复)
前言和 eslint 类似,stylelint 是 css 界的规范大师,标准配置内置了 170 余个配置项,对于有强迫症的人来说不得不用!每次去校验修复都要敲命令 fix 是非常不人性化的,我们追求的就是在编码期间就可以实时进行修复。相较于 eslint 在 vscode 有 eslint 插件可以进行自动修复,stylelint 也有相应的 stylelint 插件:官方网站:stylelint.io插件项目:stylelint / vscode-stylelint安装安装依赖在一个项目原创 2020-11-22 02:34:11 · 10261 阅读 · 0 评论 -
css在节点与伪类同时使用background-color/image多一毫米背景解决(解决多的一丝边框)
问题由于 css2 和 css3 对 background-color 及 background-image 的范围定义不同,当同时使用在伪类上时,会造成视觉上多一毫米(一丝)边框。↑ 可以看到当在节点本身和伪类上同时使用了 background-color 或 background-image 后,会造成如上结果。经测试,在 Safari 上没有此问题,在 2K 显示屏上并不明显,需要放大很多倍才能注意到。但在 1300 分辨率的中屏上多出来的一丝边框十分显眼。解决改用 animation 解原创 2020-11-21 17:48:29 · 609 阅读 · 0 评论 -
Vue2/Vue3中快捷使用data中的变量反映到css变量(scss也适用)
前言很多情况我们需要主题搭配,亦或是统一便捷的管理,css 变量是必不可少的。在 Vue 中将 data 中的变量反映到 css 变量上也是大势所趋。Vue2 用法在以前的 Vue2 中,我们通常使用计算属性反映 data 中的 变量到 css 中:<template> <div :style="cssVars"> <p class="text">测试文本</p> </div></template><原创 2020-11-10 01:08:23 · 14485 阅读 · 3 评论 -
使用transform:scale(1)巧妙模拟position:relative的定位性质
结论当父级没有明确指明 position 时,其子级的 position: absolute 将相对于第一个具有 position: relative 的父级元素定位。此时给予该没有指明 position 的元素以 position: relative 定位限制,他和 transform:scale(1) 是效果一致的。HTML <div class="relative"> <div class="parent"> <div原创 2020-11-01 05:51:53 · 3245 阅读 · 0 评论 -
css中animation动画的step-end/step-start参数作用
前言直入正题,很多人把 step-end / step-start 说的云里雾里的,其实作用非常简单。step-end / start有关他们的作用,先看一例:HTML <div class="box-origin"></div> <div class="box"></div> <div class="time"></div>CSSbody { height: 100vh; w原创 2020-10-04 02:02:14 · 4307 阅读 · 0 评论 -
sass/scss列表随机取值(列表内随机抽取一个元素值)
解决方案: @function sample($list) { @return nth($list, random(length($list))); }使用 nth() 对 list 进行取值,配合 random(Number) 随机产生一个 1 到 Number 的随机值(包括 1 和 Number),这里的 Number 即是 list 长度~...原创 2020-10-03 16:36:28 · 1751 阅读 · 0 评论 -
css中@keyframes动画0.1%的作用(类似骨架屏文字渐现效果演示)
效果实现HTML <div class="title">Animation Demo</div> SCSS.title { position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; padding: 0px 20px; color: transparent; line-height: 30px; a原创 2020-10-02 18:06:54 · 277 阅读 · 0 评论