随笔分类 -  css+html

从CSS滤镜到SVG滤镜——扭曲表情包
摘要：先展示效果： 1.CSS滤镜到SVG滤镜的区别： CSS滤镜：模糊、灰度、下阴影、反相、亮度控制等。 SVG滤镜：CSS有的它都可以实现，SVG滤镜提供更底层、更基础的控制手段。SVG滤镜更强大更灵活，但学习成本也更高。 2.制作表情包的前置知识： SVG矢量图 CSS：filter滤镜 SVG：f 阅读全文
posted @ 2022-08-29 14:15 Sofiaღ 阅读(447) 评论(0) 推荐(0)
移动端兼容（持续更新）
摘要：１．1.IOS高版本不支持input.select() 苹果8p可用input.select()，iPhone X input.select()不可用，可使用input.createTextRange()代替 2.IOS不兼容text-align-last: justify; 网上看到了很多说用伪元 阅读全文
posted @ 2021-03-31 16:05 Sofiaღ 阅读(70) 评论(0) 推荐(0)
node多版本解决方案——nvm
摘要：先说一下背景，最近做的两个项目一个是祖传angularjs1.X版本另一个是react hooks结合tailwindcss，前者angularjs的node版本比较低，而tailwindcss的node最低得12.13.0，二者node版本需求不同，所以我就只能切换node版本了。而因为我又是wi 阅读全文
posted @ 2021-01-21 14:31 Sofiaღ 阅读(344) 评论(0) 推荐(0)
绝对定位上下左右都为0 margin为auto为什么能居中
摘要：老规矩，先来一段废话，我大学刚入门的时候觉得CSS很简单，记一记就会了，不就是盒模型嘛，现在想来觉得自己那时候真的很自以为是哈哈。但是随着工作沉淀，我明白了任何技术都有着它的深度和广度，正是因为不少人对CSS都抱有轻视的态度，不说精通，能把CSS学到位的人都少之又少。当然我这么说并不代表我的CSS如 阅读全文
posted @ 2020-09-21 20:19 Sofiaღ 阅读(1618) 评论(0) 推荐(1)
css全站变灰
摘要：2020年4月4日全国哀悼日这一天，我发现不少网址都变灰了，我第一想法就是怎么做到的？不可能换素材整个网址重做一遍吧？后面发现是用的其实是css的filter滤镜： grayscale可以将图像转化为灰度图像： html { filter: grayscale(.95); } 视频、canvas之类 阅读全文
posted @ 2020-04-06 21:35 Sofiaღ 阅读(261) 评论(0) 推荐(0)
px转rem的填坑之路
摘要：这是要为一个vue项目做自适应，设计稿是1920*1080的，要适应各种手机、ipad、3840*2160的超大屏，所以就选择了rem，包用的是 postcss-pxtorem 在适配的时候遇到了很多问题，初版是这样的： // 设计稿以1920px为宽度 function setRem() { co 阅读全文
posted @ 2020-03-18 10:45 Sofiaღ 阅读(651) 评论(0) 推荐(0)
一个div画同心圆
摘要：二话不说上代码 7px是圆的半径 效果： 阅读全文
posted @ 2019-07-11 16:28 Sofiaღ 阅读(313) 评论(0) 推荐(0)
h5-video,视频在微信里变形、有黑边
摘要：如这种情况： 微信可谓是video标签的重灾区，如果你兼容了安卓的微信，那么在其他浏览器一般也没问题了除了个别（IE：你们看我干吗？）。 解决方案： 主要是object-fit要设置为：cover，再加上宽高为100%。object-fit最好不要是fill，因为fill会让视屏充满容器，可能导致视 阅读全文
posted @ 2019-06-27 16:50 Sofiaღ 阅读(1562) 评论(0) 推荐(0)
CSS样式规范
摘要：一般团队都有对CSS样式的规范，因为只有写的规范些，维护层本低，易懂。我们开发并不一次性的，往往都是要迭代的，如果这次随便写，下次迭代的时候将付出高昂的代价。而团队的规范一般都大同小异，往往都包含一下内容： 1、class命名及使用 （1）、命名尽量简洁有意义，比如大盒子一般命名为‘containe 阅读全文
posted @ 2019-06-27 16:11 Sofiaღ 阅读(218) 评论(0) 推荐(0)