CSS
史一试
这个作者很懒,什么都没留下…
展开
-
CSS滚动条样式修改
目前我们可以通过 CSS伪类 来实现滚动条的样式修改,以下为修改滚动条样式用到的CSS伪类:::-webkit-scrollbar — 整个滚动条::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb — 滚动条上的滚动滑块::-webkit-scrollbar-track — 滚动条轨道::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分。原创 2024-04-10 11:37:40 · 375 阅读 · 0 评论 -
Canvas 指南与总结
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。原创 2024-01-11 17:36:57 · 419 阅读 · 0 评论 -
浏览器页面渲染的核心流程
先上一张 chrome 浏览器渲染流程图,可以在 performance 面板查看原创 2024-01-09 14:28:39 · 460 阅读 · 0 评论 -
解决html中表格线条粗细不一的问题
通过代码可知:我们将table的border-collapse属性改成了separate,这是关键,然后td只显示下边框和右边框,最外层table边框只显示上边框和左边框,这样就解决了边框线条粗细不一的问题。我们再html中使用原生的table时,为了美观往往会通过改变td的border来改变表格边框的样式,但是通常会处出现边框线条粗细不一的问题,下面代码解决了该问题。转载 2022-10-25 16:39:55 · 2533 阅读 · 0 评论 -
模糊背景(filter)
.audio-call::before{ content: ''; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; filter: blur(16px); z-index: -1; background-image: url("../../assets/images/ditielogo.png"); background-repeat: no-repeat; background-s原创 2022-04-15 10:13:33 · 465 阅读 · 0 评论 -
CSS之轻松实现rem适配
1. vs Code安装 px to rem & rpx (cssrem)2. 修改扩展 root font size我这里是按照 设计稿 750px3. 添加 rem.js(function flexible (window, document) { var docEl = document.documentElement // 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 var dpr = window.devicePixelRatio || 1原创 2021-07-05 11:10:40 · 1129 阅读 · 0 评论 -
CSS之单行超出现实三个点|多行超出现实三个点
// 多行 需要设置宽高.order-statistic-batch-card__goods--name { width: 145px; height: 50px; overflow: hidden; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // 行数需设置 line-clamp:原创 2021-07-09 10:23:52 · 511 阅读 · 0 评论