前端

几个常用的CSS选择器

一、:focus-within 选择器在CSS中 :focus-within 是一个伪类选择器,它代表的是在一个元素内部获得焦点的元素。这个选择器主要用于确定当用户在某个元素内部点击或者通过键...

袁志蒙 2023-10-15 350次浏览

CSS中单冒号和双冒号的区别

一个冒号是伪类,两个冒号是伪元素。伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不...

袁志蒙 2023-10-15 279次浏览

HTML文字icon,Webdings字体和Wingdings字体

Wingdings介绍:Wingdings 是一个符号字体系列,它将许多字母渲染成各式各样的符号,用途十分广泛。于1997年发表,搭载在其后的 Microsoft Windows 视窗系统内,使用很简单,值得注意的是...

袁志蒙 2023-06-12 481次浏览

HTML5 <dialog> 标签

dialog 是HTML5新增的语义化双标签,用于展示一个交互式的模态对话框。它既可以创建模态对话框(用户不能与打开对话框的页面进行交互,直到对话框关闭,模态对话带半透明背景...

袁志蒙 2023-06-10 629次浏览

HTML5标签ruby实现对中文添加拼音

ruby标签在东亚使用,显示的是东亚字符的发音。将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用: <ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成,还包括可选...

袁志蒙 2023-05-17 629次浏览

css媒体查询prefers-color-scheme实现自动适配系统主题

prefers-color-scheme 是什么?W3C 在 2020 年 7 月 31 日发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme,网页现在可以通过条件规则组来获取浏览器宿系统的暗色模式状态并应用了。也就是说,现在我们可以很简单地实现...

袁志蒙 2023-05-14 498次浏览

取色器 EyeDropper API

使用取色器 EyeDropper API 我们可以在屏幕上拾取颜色,就跟ps的吸管功能一样。这是一个实验性的API,从Chrome 95才开始支持的。我们就来试用一下。首先,还是要判断一下浏...

袁志蒙 2023-05-11 562次浏览

css3实现文字穿透效果

最近看到几个css新属性,突发奇想的可以实现一个比较有意思的效果,我们叫做文字穿透效果吧,主要用到了几个css属性:# 文字设置成透明 color: transparent; # 文字描边 text-stroke: 1px #fff;

袁志蒙 2023-05-09 495次浏览

利用css3的filter(滤镜)属性制作交融效果

交融效果:方式一: 元素设置filter:blur模糊,元素父级设置contrast时,会实现模糊元素相交产生水滴交融且相交部分变清晰的效果即:进行动画的图形的父元素需要是被设置了filter:...

袁志蒙 2023-04-23 612次浏览