admin

&::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } &::-webkit-scrollbar-thumb { background: #000; } 主要文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

2022-11-04 CSS 74
admin

1 用utf8格式, 需要 双引号“”替换为单引号,而且采用url encode编码,例如# 替换为 %23,background-image: url('data:image/svg+xml;utf8, svg t="1656040038219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3009" width="200" height="200" path d="M512 234.666667c131.946667 ...67 77.482667

2022-06-24 CSS 前端 HTML 425
admin

网上看过很多 Switch 的例子,很多还需要额外的 label 或者 i 标签配合来实现,看到有个完全使用 CSS3 来实现的例子。只使用 CSS3 的伪类就可以实现。HTML: input type="checkbox" class="switch" input type="checkbox" class="switch" checked input type="checkbox" class="switch" disabled input type="checkbox" class="switch" checked disabled CSS.switch { box-s

2022-03-08 CSS 前端 430
admin

一,放大图标方法一:直接修改图标的 font-size。方法二:使用 transform:scale(1.5) 放大图标,需要注意有时在 iconfont 上是无效的,因为 transform 只能使用在块状元素上。比如:display:block 或者 display:inline-block。二,图标位置图标和文字往往不在一条基线上,常常需要调整 iconfont 图标的位置,最简单的方法是:.some-div .iconfont{ position: relative; top:0.1rem; } 另一种方法是使用 vertical-align 属性设置元素的垂直对齐方式。该属性

2022-03-01 CSS 422
admin

媒体查询(Media queries)非常实用,尤其是当你想要根据设备的大致类型(如打印设备与带屏幕的设备)或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。媒体特性(Media features)描述了 user agent、输出设备,或是浏览环境的具体特征。媒体特性表达式是完全可选的,它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。最常用的媒体特性肯定就是“width"了。今天介绍的这个 CSS

2022-02-22 CSS 532
admin

SVG 的知识基础你可能学习过关于 SVG 的基础知识,并且能读懂 SVG 的结构。至少你知道:SVG 元素: svg , symbol , g , path SVG 属性: d, fill, stroke, stroke-width注意:从绘图工具中导出的 SVG 经常带着一些不必要的内容和标签等(其中 d 下面包含了清晰的路径数据),可以使用工具比如 SVGOMG ,然后比较一下处理前后哪些东西是移除或简化过的。移除颜色数据通常单色图标的源文件中, path 的颜色都是黑色 #000000。并且没有 fill 属性。如果我们在 SVG 文件中设置了 fill 属性,就不能通过 CSS

2021-12-24 CSS 350
admin

iconfont.cn 官方给我们讲解 iconfont 的实现原理。字体内部我们来看下一个字体的样子。我们可以通过一些软件打开字体,比如fontforge,fontlab。比如下面的方正大草字体:我们打开看下:可以看到“我”这个字对应的的图形就是我们在网页上看到的样子。另外注意左上角的unicode。是6211,也就是我们的另一种表现形式。再双击可以看到我这个图形的样子:其实就是一些路径。而这个路径可以用ai,ps,sketch等等来画,画完粘贴到这里。iconfont1.0所以我们就可以做一些事情了,我们可以去改造字体,把一个字对应的图形换成我们设计师设计的样子,处理好兼容性就成了我们ic

2021-12-24 CSS 356
admin

蛮荒时期 CSS Sprites在很久很久以前,使用图标一般是直接使用图片,或者使用雪碧图。缺点是颜色单一,难以维护。//CSS [class^="icon-"],[class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(bootstrap/img/glyphicons-h

2021-12-21 CSS 302
admin

node-sass 的问题之前一直用的是 node-sass,他包含两部分,一个是使用 Node.js 编写的包裹器 Wrapper,一个是使用C++编写的 Sass 编译器 libsass,最开始是不同平台编译这个编译器麻烦,后来node-sass就直接发布各个平台编译好的编译器了。在国外就解决了编译的问题。在国内因为下载源被墙,所以常出现各种安装失败。http://127.0.0.1:3001/articles/657http://127.0.0.1:3001/articles/631sass 官方主推 dart-sassdart-sass是Sass的主要实现,它快速,易于安装,并且可以编

2021-12-17 CSS 374
admin

一,流光按钮 CSS 样式.btn{ width: 100px; height: 50px; border-radius: 50px; text-align: center; background-color:aqua; line-height: 50px; background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE); background-size: 400%; } @keyf

2021-09-22 CSS 756
ngtwewy
随机推荐
TypeScript 和 Koa 实践
MySQL 字符串截取函数 SUBSTRING_INDEX
Node.js 使用 Jest 做单元测试
MySQL 表名预处理
Linux 中 top 命令的 Load Average 含义
如何调整 iconfont 图标的位置和基线
Debian11 安装笔记4:安装常用软件
WordPress 按自定义排序的两种方法
CSS 滚动条样式修改
什么是 RESTful API 的幂等性

微信联系我

夜间模式切换
回到顶部