今天，有个群友问了我这么一个问题，如果不想切图，是否有办法实现带渐变边框的字体效果？如下所示： 本文，就将尝试一下，在 CSS 中，我们可以如何尽可能的实现这种渐变边框字体效果。 元素叠加 首先，比较容易想到的写法是通过元素叠加实现。 元素本身实现文字效果本身 通过元素的伪元素，配合 ...[2024/7/22]

脚本化CSS 我们刚讲过如何获取和设置行内样式的值,但是我们开发不会所有样式都写在行内,同时js没法获取内嵌样式表和外部样式表中的值. 事实上DOM提供了可靠的API，得到计算后的样式。 1. 获取计算样式表 只读，不可写 获取的值是计算后的绝对值，不是相对值 window.getCo...[2024/7/1]

Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道，在此前，虽然有 ::-webkit-scrollbar 规范可以控制滚动条，可是，::-webkit-scrollbar 是非标准特性，在 MD...[2024/6/12]

众所周知,对于前端来说c 是最难的了，如果你遇到了一个脑洞大奇思妙想的产品，那就更难了。 很不巧，了不起就经受过这样的痛苦，产品经理看了HarmonyOS4的发布会，脑子一热就让设计师出了一套膨胀蓬松的UI 了不起经过调研，查找了上百个样式组件库，终于找到了一款合适的样式库——clay....[2024/5/31]

以下是一份CSS布局学习大纲，它涵盖了基本到高级的CSS布局概念和技术 引言 欢迎来到CSS教程！如果你已经掌握了HTML的基础知识，那么你即将进入一个全新的世界，通过学习CSS（Cascading Style Sheets，层叠样式表），你将能够赋予网页丰富的视觉效果和布局。CSS是前端...[2024/5/15]

最近看到了许多关于 :has() 选择器的知识点，在此总结下来。 MDN 对 :has() 选择器 的解释是这样的： CSS 函数式伪类  :has()  表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列...[2024/3/25]

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSS accent-color 支持使用几行简单的 CSS 为表单元素着色，是的，只需几行...[2024/3/1]

在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。 其功能能够涵盖： 精简 调暗 饱...[2024/1/10]

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： div { border-radius: 25px; border: 2px dashed #aaa; } 但是，原...[2023/12/15]

本文所有内容，纯属个人观点，无意与任何人争论 前端技术的现状 我觉得前端技术发展到现在有两个最主要的特征 前端工具链为前端工程化提供了强有力的支持 这方面主要是webpack、rollup、esbuild等工具产生的价值，当然还有背后的Node.js。 这些工具让前端开发者可以更...[2023/11/17]

最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会...[2023/11/15]

前言 本文章是根据《深入解析CSS》一书所作的学习笔记，书中的知识点基本都概括在这。希望对您有帮助，另外本博客是通过word笔记文档导入，虽然后续对内容和代码相关进行了一些格式处理，但还是可能会有漏掉以及不完善的地方，还请见谅。   优先级与继承 样式冲突时: 1>2>...[2023/11/1]

我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。 最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」： 场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震： 我的第一想法就是...[2023/10/19]

先看效果 乍一看，是不是感觉很简单，仔细一瞅发现事情好像没有那么简单。 如果十分钟还没想出怎么实现，那就把简历上的“精通c ”改成“了解c ”……?? 大部分人第一感觉都是想着用border-bottom去做，但是仔细看一下这个是多行文本，下划线始终在最后一行肯定是不合适的，而且下划线运...[2023/10/11]

很早之前，就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！ CS...[2023/9/15]

原子化 CSS 框架 我记得很久之前有时候为了少写些c ，我们通常会有如下的样板代码 .block { display: block; } .flex { display:flex } .flex-center { align-items: center; justify-c...[2023/8/30]

本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果： 上面的动画效果，非常有意思，核心有两点： 小球随机做 X、Y 方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果 小球在碰撞边界的瞬间，颜色发生随机的变化 嗯？很有意思的效果。看上去，我们好像使用 CSS 实现了...[2023/8/29]

前情 Tailwind CSS 是一个原子类 CSS 框架，它将基础的 CSS 全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性也不错。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名，然后生成相应的样式代码并写入到一个静态 CSS 文件中...[2023/6/19]

今天聊一个图片加载提前占位的一个问题 ??，内容比较适合初学者。 起因 在响应式页面当中，图片加载之前是不知道图片高度的，加载成功图片完全撑开。如果不做提前占位会把下面的内容挤下去，页面出现抖动，就像下面效果一样： 假如图片是自适应的，宽度为屏幕宽度的30%，高度等比例缩放，这时候是无法...[2023/6/9]

作者：vivo 互联网前端团队 - Zhang Jiqi 本文主要讲述了CSS中的级联层（CSS@layer），讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突，提高代码可读性和可维护性。 一、什么是级联层(Cascade Layers)？ 1.1 级联层...[2023/5/30]

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如 ： calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。 min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。 clam...[2023/5/29]

我们平时在使用Elementui Antdesing这些UI库时，难免会碰到使用deep强行侵入式去修改组件内部样式的情况；   比如下列代码，我们需要把ant的分页样式进行高度自定义，就得使用deep去修改；   这种实现方式确实能够达到我们的目的，但在开发时确总觉得不太合...[2023/5/10]

1. 水平条纹背景 当给背景设置渐变效果时，默认的渐变方向是垂直由上到下的，效果如下： { background: linear-gradient(#aaa, #ddd); } 尝试拉近色标的距离，会发现渐变区域变小了： { background: linear-gradie...[2023/4/21]

目录制作：1.定义canvas标签：2.开始js部分，先定义变量：3.初始化字符串数组，先给每条字符串位置，字符先不给：4.绘制每条字符串：5.更新字符串：6.设置动画过程：7.在窗口大小改变时，设置canvas画布能实时铺满屏幕：完整代码： 制作： 1.定义canvas标签： <ca...[2023/3/29]

本文将介绍一个角向渐变的一个非常有意思的小技巧！ 我们尝试使用 CSS 绘制如下图形： 在之前，类似的图案，其实我们有尝试过，在 单标签实现复杂的棋盘布局 一文中，我们用单标签实现了这样一个棋盘布局： 那么，本文有什么特殊之处呢？让我们一探究竟。 快速实现网格布局 首先，上述的布...[2023/3/22]

本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。 CSS 变量（CSS Variable），在之前也叫做 CSS 自定义属性，其使用方式如下...[2023/3/8]

你知道的和你不知道的所有选择器。不包含尚未广泛实现的，也不包含已弃用的。 基本的选择器规则（Selector） 类型（Type）选择器 直接用标签匹配特定的元素 span { ... } p { ... } 类（Cla ）选择器 以.开头，匹配含有这个 cla 的元素 .info...[2023/2/10]

在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。 实现倒影的两种方式 首先，快速过一下在 CSS 中，实现倒影的 2 种方式。 使用 -webkit-box-reflect 正常而言，-webkit-box-refl...[2023/1/16]

1、考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2、使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS...[2022/5/9]

本文实例为大家分享了js+c 实现飞机大战游戏的具体代码，供大家参考，具体内容如下 用js和c 实现，c 中定义样式，js中定义了具体的实现事件，例如碰撞、子弹、飞机等。 main.c 文件(可根据需要定义)： *{ ? ? margin: 0; ? ? padding: 0; ...[2022/5/9]

目录游戏介绍实现技术本游特色技术实现初始化页面小方块设置主角移动自动索敌敌人移动胜利与失败编辑关卡移入移出变色点击设置保存关卡 游戏介绍 这是一款2d益智闯关游戏，玩家须躲避敌人与陷阱到达终点 拥有多个关卡 可进行关卡的自定义并留存数据 实现技术 vue tailw...[2022/4/11]

本文实例为大家分享了vue或c 动画实现列表向上无缝滚动的具体代码，供大家参考，具体内容如下 方法一：vue的实现方法 <div id="publishMain" cla ="b_list"> ?<div id="publishMain1"> ? ?<...[2022/4/11]

前端需要学什么？ HTML5、CSS3、JavaScript 集成开发环境 IDE（编写和运行） 前段开发环境 编写环境： 高手（记事本） 企业（Sublime、Webstorm、DW、Brackets） 运行环境： 浏览器（Chrome） 学完后能做什么？...[2022/1/17]

背景 某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局： 在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的： 一旦涉及到圆角或者波浪效果，难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用...[2022/1/17]

文本样式 文本缩进 属性名：text-indent 取值： 1、数字+px 2、数字+em(推荐：1em=当前标签font-size的大小)(推荐使用) <style> p{ /* text-indent: 32px; */ 第一种...[2022/1/17]

什么是浏览器内核？ 简单来说，浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上，浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息 浏览器内核又可以分成两部分：渲染引擎和JS引擎 渲染引擎：负责获取网页的内容并显示，不同的浏览器内核对网页的解析渲染也不同 J...[2022/1/17]

font字体 目标：能够使用字体和文本相关样式修改元素外观样式 字体大小 属性名：front-size 取值：数字+px 注意点：谷歌浏览器的默认值是16px，单位需要设置，否则是无效的。 <style> p{ font-size: 3...[2022/1/17]

概念 px、em、rem都是计量单位，都能表示尺寸，但是有所不同，其各有各的优缺点 px px像素（Pixel），像素px是相对于显示器屏幕分辨率而言的 px作为单位是固定不变的，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 em em的值不固定，会继承父元素的字体大小，...[2022/1/17]

简介 在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。 一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端（iPhone、i...[2022/1/17]

C 三大特性 继承性 特性：子元素有默认继承父元素样式的特点 可以继承的常见属性有： 1、color 2、font-style、font-weight、font-size、font-family 3、text-indent、text-align 4、line-height 5.......[2022/1/17]

网页内容的组成 doctype: 提供浏览器的html版本信息 head : html头部 meta: 元数据信息 charset: 声明当前文档所实用的字符编码 http-equiv: 客户端行为，如渲染模式，缓存等 name[keywords]: 搜索引擎关键字 name[des...[2022/1/17]

在做页面时，如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情，可以设置其属性 href = "#"，但是，这样会有一个问题，就是当页面有滚动条时，点击后会返回到页面顶端，用户体验不好。 （1）阻止默认事件 阻止默认事件的发生有两个方法： return false e.prev...[2022/1/17]

楔子：     博主的就业方向是JAVA后端开发嘛，虽然是后端，但是对于一些前端的知识还是要掌握的，所以博主接下来的一段时间要浅学一下 HTMl，CSS，JavaScript，但小生心系后端，所以笔记的话可能会记得"粗糙"一些（手动狗头）。   1、HTML基...[2022/1/17]

1、背景颜色和背景图片： 代码： <!DOCTYPE html> <html> <head> <!-- 这行代码的作用是建议浏览器以“utf-8”字符集打开 注意：并不是设置当前页面的字符编码方式 --> <meta...[2022/1/17]

c 3中通过transition属性可以实现一些简单的动画过渡效果~ 1、语法 transition: property duration timing-function delay; transition 属性设置元素当过渡效果，是一个复合属性，包括四个简写属性： transiti...[2022/1/17]

注意：文中代码的效果仅展示了在浏览器上的外观，并未展示效果，别问，问就是博主懒（硬气地说道）   1、form表单初步： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8...[2022/1/17]

1、HTML中元素的id属性： 笔记： 1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。 2、注意：表单提交数据的时候，只和name有关系，和id无关。 3、id有什么用？     &nbs...[2022/1/17]

楔子： 1、什么是CSS，有什么作用？ 1)CSS(Cascading Style Sheet):层叠样式表语言。 2)CSS的作用是：     修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 HTML还是主体，CSS依赖HTML。C...[2022/1/17]

背景 因为是一个二期项目，需要在一期的基础上做一些风格的改变，但是苦于没有产品和UI，所以这个事情就落到了前端的头上，一开始只是想的统一一下按钮和标题的颜色（这里就用到了var），顺便做些颜色改动比较方便，后面直接要求做一个动态主题切换（当然只是颜色的切换），所以就顺便研究了一下利用var来实现...[2022/1/17]

------------恢复内容开始------------ html简介 认识HTML后要能明白 （1）网页的基本组成是什么 （2）说出什么是HTML （3）常用的浏览器有哪些 （4）web标准的三大组成部分是什么 首先让我们了解有关网页的基本概念 什么是网页？ 网站是指在因特网...[2022/1/3]