css

优化网站代码是提高页面加载速度的关键步骤之一。通过压缩HTML、CSS和JavaScript文件，可以显著减少文件的大小，从而加快下载速度。使用内容分发网络（CDN）可以将静态资源分发到全球多个服务器...

​​想了解更多关于开源的内容，请访问：​​ ​​51CTO 开源基础软件社区​​ ​​https://ost.51cto.com​​ 前言 前段时间HarmonyOS 3发布了，吸引了不少的眼球，为了...

​​想了解更多关于开源的内容，请访问：​​ ​​51CTO 开源基础软件社区​​ ​​https://ost.51cto.com​​ 前言 在做鸿蒙项目过程中，发现在H5用的CSS的式样在鸿蒙上有些属...

​​想了解更多关于开源的内容，请访问：​​ ​​51CTO 开源基础软件社区​​ ​​https://ost.51cto.com​​ 前言 最近在学习OpenHarmony开发相关知识，而动画是使用比...

前置知识点 animation animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-f...

,看到封面这张图，是不是如同艺术品一般，第一次看到这张图时，是比较震惊的，迫不及待的研究其源码是如何实现的，最后更为惊奇的是只需要纯 CSS 即可实现，接下来就展开说明实现过程。,实现此效果需要了解 ...

本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。 ,那些你不知道的炫酷交互...

在如今SPA应用流行的情况下，页面上的所有东西都是通过javascript进行加载，本文将带你一步一步截获用户请求，并修改请求地址。,我们主要使用的方法为Hook原生接口进行接口调用拦截；在拦截前，先...

,如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现...

前言 hi大家好，我是小鱼，今天讨论的是前端响应式方案。这也是很多面试官喜欢问的一个问题，题型考察范围比较广，区分度比较大，一题就把你看得透透的，特别是移动端的更不可避免。所以，卷起来吧。 响应式 一...

朋友生日了，直接画，炫技并且表示本人闲的全身疼才会去拿CSS画画，以此嘲弄对方的加班： ,既然贺卡做出来了，那就顺便介绍一下贺卡制作流程吧，其实也不是什么技术，也就是CSS 拼拼拼就可以了，简简单单...

(目录),,大家好，我是翼同学。,前几天刚学完CSS选择器，有位大佬分享了一个有关 CSS选择器用法的小游戏，共32关，如果你全都通关了，那么你的选择器算是初步入门了。,下面是游戏链接：,欢度国庆，在...

华为手表开发：WATCH 3 Pro（14）传感器订阅陀螺仪 初 环境与设备 传感器介绍与说明 鸿蒙开发 文件夹： 文件 重点 新增展示的文本标记 index.hml index.css index...

目录 ​​CSS简介​​ ​​ CSS概念​​ ​​为什么需要CSS​​ ​​CSS和HTML之间的关系​​ ​​ 语法​​ ​​学习效果反馈​​ ​​ CSS的引入方式​​ ​​ 内联样式（行内样式...

,前面我展示了一些如何选择HTML元素的示例。 关键是要了解jQuery选择器如何准确地选择要应用效果的元素。 jQuery元素选择器和属性选择器允许按标记名、属性名或内容选择HTML元素。 选择器允...

四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用...

理由如下：,以上是我认为最大的便捷之处。当然它还有更多好处：自带了Prettier、ESLint便于规范代码风格，自带了JEST方便做测试，提供了一些项目模版等。当然这些你不用也可，对我们的开发完全没...

今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码...

(2-详细方法 | 对象的种类有哪些？),(2-详细方法 | 对象的种类有哪些？) 1 使用细节 将一段文档传入BeautifulSoup 的构造方法,就能得到一个文档的对象,； 可以传入一段字符串或...

今日是农历六月初一。不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~,,以上15种水果你能看出都是什么水果吗？相对不够...

提到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实...

给元素设置伪元素的时候，必须设置其 content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串： content: ""。,::before 表示在原始元素的实际内容之前表示一...

一般都知道css可以实现单行溢出限制，那么多行溢出的话，css该怎么去实现了，此例主要借助css的伪元素样式去实现的，具体代码和注释如下。 单行超出宽度限制溢出 html代码： <div cla...

混合 react提供了组件的目的是为了复用虚拟DOM，所以react提供了混合的技术是为了复用组件的功能 在ES5中，我们可以通过mixins使用，继承对象中的属性和方法 但是ES6中，提供了exte...

radial-gradient radial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。 css中我们使用radial-gr...

近年来，小程序蓬勃发展，从微信到支付宝、抖音等各大平台，小程序纷纷上线。小程序发展如此快速，究其原因离不开它的几大特点：获客成本低、用户访问成本低、轻量触达、用户体验佳、用户负担小、更加安全。 小程序...

(总结一下前端css样式规范),通用规范,如果 CSS 可以做到，就不要使用 JS，建议并适当缩写值，提高可读性，特殊情况除外 “建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某...

基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。,那些你不知道的炫酷交互效果系列：,本文带来的炫酷的导航交互效果...

在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。,如下所示，如果图像不是完全正方形，而是形状像六...

今天才想起来端午这回事，没办法就急急忙忙的赶工一下，接下来我就画一下这个海报试试手了：,,先给整个网页制作一个布局吧，直接 flex 搞定，并且使其居中 justify-content、align-i...

box-shadow box-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果: .wrapper { position: fixed; left: 0; top: 0, b...

今天分享一下，我们项目当中的一些​​webpack​​配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的，尤其像插件的配置，都是十分相似的。 我们现在开始进入今天的主题啦...

如下示例，是使用VUE 打造的本地小说阅读网站 ​编辑 一、本地小说网站总体组织框架 1、所需的VUE库和elementLib以及JQ库 ​编辑 2、本地目录设计 编辑 编辑 藏书库下，是HTML...

calc calc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如​​angle​​、​​length​​、​​frequency​​、​​time​​，​​percentage...

前言 本文整理了实现悬浮窗以及聚焦登录组件的功能。 为的是方便大家和自己的学习。 省流：可以只看1.2 和 2的代码即可 1 悬浮窗 现在各大流行视频网站的平台都在使用这种悬浮显示的效果，我就想这种东...

通过添加class以及修改css变量得方式实现一个svg图标切换不同得主题色 1.在变量文件中定义几组控制几种不同颜色得变量 分析提供的图标发现有三种颜色，因此定义三个css变量 //控制导航双色图标...

我们最近使用 CSS mask属性创建花哨的边框，本文将使用 CSS mask和 clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状...

大家好，我是 CoderBin,在介绍BFC之前，需要先给大家介绍一下文档流。,我们常说的文档流其实分为 定位流、 浮动流、 普通流三种。,如果元素的属性 position 为 absolute ...

通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 ,看到这个动画效...

(目录),上面的代码，就是最典型的例子。 其中 style 标签的内容，就是一个 CSS的代码。,,,,,CSS 是不区分大小写，但是我们开发时统一使用小写。,,这个类选择器，可以说是我们最常使用的一...

基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSS grid，clip 和 mask来自定义网格形状布局。,三部分文章不一定...

提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的gif动图，真实的情况噪点的变化速度会快很多，这里为了gif的大小，截取的时间较短供...

不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让...

背景知识 颜色渐变设置：background: linear-gradient(direction, color-stop1, color-stop2, ...);指定背景图片大小：backgroun...

前言 大家有看过星球大战这部电影吗，里面有许多场景间的过渡效果看起来非常的丝滑，那我们能不能使用CSS来模拟实现一下呢？ 渐变体验 如果mask-image以图像或渐变的形式出现，则我们可以控制与元素...

要让Chrome浏览器支持小于12px的文字，可以使用CSS的font-size属性来设置字体大小。 以下是一个示例CSS代码，将所有字体大小设置为小于12px： * { font-size: 10p...

之前看到coco[1]的这样一篇文章：纯 CSS 实现波浪效果！[2]，非常巧妙，通过改变border-radius和不断旋转实现的波浪效果，有兴趣的可以去研究一下。 这次尝试一下使用 CSS 渐变来...

在今天的文章中，我们将一起来学习如何用 HTML 和 CSS 制作响应式导航栏效果。 这篇文章主要是面向初学者的，如果你是有经验的开发者，请直接跳过或者忽略。 在这篇文章中，我们将一起来实现一个响应式...

背景 设计师的原稿是这样的渐变： 导出的视觉稿是这样的：（导出工具没有识别到渐变） 于是决定去找设计师沟通这个渐变”长什么样“。当然，设计师并不会像写 CSS 一样给你描述渐变，所以作为需要写出这个渐...

本文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改,如果你是CSS渐变的新手，你可能...

之前在这篇文章（CSS 实现树状结构目录[1]）中实现了一个树状结构，效果是这样的,图片,整个实现没有用到任何 JavaScript，非常巧妙，有兴趣可以回顾一下。,不过有时候还需要那种带连接线的样式...

,随着前端项目的不断迭代，就可能出现部分 CSS 代码未使用的情况。这些未使用代码就可能影响应用性能。,那么，如何有效地删除未使用的 CSS 代码呢？本文将介绍一种强大的工具——PurgeCSS，它可...

文章首先解释了CSS网格是什么以及为什么它在现代网页设计中非常重要。它强调了响应式设计的重要性，这是使网站在各种设备和屏幕尺寸上都能良好呈现的关键。,接下来，文章列举了9个最佳的响应式CSS网格生成器...

,Webpack是一个前端资源模块化管理和打包工具，它可以将多种静态文件（图片、CSS、JS等）视为模块，通过各种插件对这些模块进行加载、转换、分块并最终输出到合适的位置。Webpack以其高度的可配...

这篇文章介绍了15个重要的CSS属性，旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法，并提供了相应的示例代码。通过这篇文章，读者可以了解到一些有趣且实用的CSS属性。,CS...

终于上线啦，有好多好玩的模型，包括最近很火的瞬息宇宙,给定以下HTML和CSS代码，你知道 test文本的颜色会是什么吗？,花点时间仔细思考一下,如果你猜测的颜色是红色，那么你是正确的！你也对CSS特...

这篇文章介绍了一种名为CSS层叠的技术，用于优化CSS重置过程。它解释了CSS重置的概念，即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后，它引入了CSS层叠技术，以更好地控制样式的层...

这篇文章详细解释了CSS中的sticky定位方式，并讲解了它的工作原理。,CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。原因有两方面：一是等待浏览器支持的时间太长，导致这个特...

,众所周知，CSS 仅支持多行注释，也就是/**/注释。,习惯了 SCSS或者LESS这些预处理器的同学，肯定非常希望有双斜杠注释。,很明显这种写法要比/**/简洁地多，那么，为啥官方迟迟不支持双斜杠...

,现在越来越多的浏览器开始支持 CSS Colors Module Level 4[1] 规范中定义的功能，其中包括在 CSS 中操作和显示颜色的多种方式。本文就来看看什么是颜色空间、如何在CSS中定...

之前在这篇文章中：CSS 实现 Ant Design官网Logo彩蛋效果[1]实现了一个鼠标 hover 效果，如下,,Kapture 2022-01-25 at 10.33.11,原理其实很简单，就...

,今天来介绍一下 Chrome 111+正式推出的 CSS颜色混合函数：color-mix()[1]。,所谓颜色混合，顾名思义，就是将两种颜色按照一定的比例混合起来，和调色板比较像。到目前为止，可以说...

,最近，群里有个很有意思的问题，使用 CSS 如何实现如下 Loading 效果：,,这是一个非常有意思的问题。,我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果：,动画如下：,,与要求...

作为 Web 开发人员，我们经常遇到需要隐藏网页上的元素的情况。在本文中，我们将分享8 种在 CSS 中隐藏元素的方法，每种方法都有优点和注意事项。,,隐藏元素最简单的方法之一是调整其不透明度。opa...

随着 Web 开发的发展，新的 CSS 趋势正在出现，以帮助开发人员创建更具视觉效果的网站。从响应式设计和动画到新技术和样式，CSS 趋势不断变化和适应，以满足现代网页设计的需求。由于 CSS 趋势是...

,说明,1、css box-sizing用于改变用于计算元素宽度和高度的默认CSS盒子模型。,并且可以来模拟不正确支持CSS盒子模型规范的游览器行为。,2、box-sizing属性可以是三个值之一：c...

,说明,1、CSS Modules指的是像import js一样去引入css代码。,代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的css样式。,2、Modules...

,说明,1、根据HTML构建HTML树（DOM）。,2、根据CS构建CSS树（CSSOM）。,3、将两棵树合并成一颗渲染树（render tree）。,4、Layout布局。,（文档流、盒模型、计算大...

,说明,1、为低版本浏览器构建页面，保证最基本的功能，然后对高级浏览器进行效果、交互等改进，增加功能。,达到更好的用户体验。,2、渐进增强认为应该关注内容本身。,请注意区别，连浏览器这个词都没提。内容...

,1、定位的组成：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。,2、定位模式有四个值static、relative、absolute、fixed。,s...

,说明,1、这个元素并不脱离文档流，仍然保留着元素在文档流中的原始位置。,2、当元素在容器中滚动超过指定偏移值时，元素固定在容器的指定位置。,也就是说，如果你设置了top:50px，当sticky元素...

,注意点,1、a标签的伪类选择器可以单独出现也可以一起出现。,2、a标签的伪类选择器如果一起出现, 那么有严格的顺序要求。,默认状态:link->被访问状态:visited->鼠标悬停状态...

,说明,1、用于规定元素哪一侧不允许浮动元素，默认值为none，表示不清除，左右两侧允许浮动元素。,2、确保当前元素的左右两侧没有浮动元素。clear只对元素本身的布局起作用。,可选值,left清除左...

web-css-gaoji-jichu.jpeg,无论是实际开发中，亦或者是求职面试中，css 垂直居中往往都是一个绕不开的话题，其中不乏有许多面试者在多次双重尝受打击之后，而没有一个很好的反击点，刚...

,1、单行行内元素居中，只需要将子元素的行高等于高度就可以了。,2、多行元素，最多的是使用 table-cell 的方式。子元素的表现形式和行内元素类似，子元素不能独占一行。,以上就是css行内元素的...

,说明,1、传统布局方式就是通过盒模型，使用display属性（文档流布局）+position属性（定位布局）+float属性（浮动布局）。,2、可以分为文档流布局、浮动布局和定位布局。,文档流布局...

学习一些好的实用的 CSS 技巧，可以帮助我们提供工作效率。因此，今天这篇文章，我将跟大家分享一些很棒的CSS知识技巧，希望对你有用。,好了，我们现在开始吧。,这些伪类用于对指定范围内/外的输入进行样...

,说明,1、后代选择器必须用空格隔开。,2、后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代。,3、后代选择器不仅仅可以使用标签名称，还可以使用其它选择器。,后代选择器可以...

2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面，合作目标是实现 14 个功能。,本文是在 Google IO 2022上发表的演讲的文字形式。这里不会对每个功能进行深...

,鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。,而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。,在之前的这篇文章中 -- [1]，我们介绍了非常...

,大家好，我是 CUGGZ。,当开始一个新的前端项目时，首要任务就是重置 CSS 中的一些默认样式。下面就来看看在现代 CSS 中如何进行样式重置。本文将深入研究每条规则，以了解它的作用和使用它的原因...

防御性CSS，防的是谁？我把他总结为：一切使表现和行为偏离预期效果的情景。出现这些场景的原因是因为终端环境的多样化，开发及测试用例只能覆盖大多数使用场景，在其他环境下，解析机制差异、内容动态变化等，都...

, 大家好，我是前端西瓜哥。今天来看看前端工程化是什么。,工程化，可以理解为使用一些方式，去改良然后提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效...

,说明,1、使用定位布局时，盒子可能会重叠。,2、z-index可以用来控制盒子的前后顺序(z轴)。值可为正整数、负整数或0，默认auto，值越大，盒子越高。,若属性值相同，则按书写顺序，后来居上...

,1、通常情况，浏览器都会为元素设置一些默认样式。,2、默认样式的存在会影响到页面的布局。通常情况下编写网页时必须要去除浏览器的默认样式。,重置样式表：专门用来对浏览器的样式进行重置的。,reset...

SVG 不仅仅是图标和插图，它还有很多我们开发人员有时会忘记的隐藏力量。与 CSS 相比，使用 SVG 有很多用途。例如，构建循环加载动画，或在图像上应用蒙版，在这种情况下，这并不意味着无法使用 CS...

今天，遇到了一个很有意思的问题，一名群友问我，仅仅使用 CSS，能否实现这样一种响应式的布局效果：,简单解析一下效果：,很有意思的一个响应式布局，让信息在小屏幕下得到了一种不错的展示。,那么，仅仅使用...

大家好，我是 ​​ConardLi​​，今天给大家分享 CSS 中一个神奇的属性：filter[1]，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的,gif录制略...

,响应式设计指的是根据屏幕视口尺寸的不同，对 Web 页面的布局、外观进行调整，以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。,响应式设计如今也成为 web 应用的基本...

,1、直接给元素添加pointer-events:none;样式来禁止触发事件，实现不可点击。,2、先给元素添加“cursor:not-allowed;”样式；然后使用js代码阻止点击事件的触发，实现...

,移动优先的设计方法很棒——它专注于对用户真正重要的东西，它被很好地实践，并且多年来一直是一种常见的设计模式。所以开发你的 CSS 移动优先也应该很棒……对吧？,嗯，不一定。经典的移动优先 CSS 开...

,1、浏览器对CSS样式的支持程度、分析结果和识别CSS的优先级，可以根据这些的特征写出不同的CSS样式代码。,2、IE6可以识别下划线和星号*，IE7可以识别星号*，不能识别下划线_。,firefo...

今天从前端的角度看看网页变灰是如何实现的，以及相关使用技巧。,先来看看一些主流网站是如何实现置灰的：,,,,可以看到，这些网站实现置灰的方式不太一样，但是大同小异。本质上都是使用了 CSS 中的 fi...

,px像素(CSS像素),1、px是pixel的缩写，是像素单位，也是影像显示的基本单位。,2、px是CSS中相对长度的单位，相对于屏幕显示器的分辨率而言的。,CSS像素(CSSPixel)：,又称虚...

,笔者近期学习 Material UI 的过程中，发现 Material UI 的组件都是使用 CSS-in-JS 的方式编写的，联想到之前在社区里看到过不少批判 CSS-in-JS 的文章，对此有些...

​译者 | 陈峻,审校 | 孙淑娟,如果您一直在使用CSS，那么很可能会遇到一些布局或跨浏览器兼容性等问题。例如，CSS3的样式不太适用于IE的某些旧版本。而有时候，当我们准备使用某项功能时，却发现它...

,说明,1、通过display属性设置属性值为grid或inline-grid或者是subgrid就可以了。,2、当元素设置了网格布局，column、float、clear、vertical-alig...

让我们学习一些实用的 CSS 技巧，以提升我们的工作效率。这些 CSS 技巧将帮助我们开发人员快速高效地构建项目。,现在，让我们开始吧。,这些伪类用于在指定范围限制之内和之外设置输入样式。,如果 in...

在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。,在这篇文章中，将带领大家了解Jake Arc...

,最近我在 CodePen 上看到了这样一个有意思的动画：,,整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。,完整的代码你可以看看这里 ...