w3cplus

大漠_w3cpluscom

你可以用伪元素做的有趣事情CSS 中的伪元素能做什么，其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们清除浮动、制作Icon图标、分割线、CSS Tooltips、CSS计数器等事情。其实除了这些常见的事情之外，CSS 伪元素还可以帮助我们做一些非常有趣的事情，这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来，和大家聊聊这方面的话题。

大漠_w3cpluscom

伪元素能帮助我们做些什么伪元素已经不是什么新东东了，大家在实际生产中肯定有使用过伪元素。但伪元素能帮助我们做些什么呢？针对该问题，有很多同学能很好的回答，但也有很多场景并不是所有开发人员都完全了解的。今天再次花时间来整理一下伪元素能帮助我们做些什么？我想接下来的内容和实例肯定会有不少同学感兴趣的。如果你是其中的一位，那么请继续往下阅读。

大漠_w3cpluscom

CSS Tips：跑马灯效果在 Web 上，存在着众多借鉴跑马灯理念的无限滚动展示方案，它们能在屏幕或是限定区域内循环往复地呈现信息内容。不论是作为网站首页上吸睛夺目的焦点图轮播，还是新闻板块中连绵不断的滚动新闻标题，这类无限滚动特效无疑为 Web 页面注入了生动活泼的气息，有效地抓住了用户的目光焦点。今天，我们将探讨如何仅运用 CSS 技术来实现这一类无限滚动效果，深入剖析其背后原理，并指导你如何在 Web 项目中应用它们。

大漠_w3cpluscom

聊聊 CSS 的 ::marker::marker 是一个 CSS 的另一个伪元素，有点类似于 CSS 的 ::before 和 ::after 伪元素。只不过，它常用于给列表标记框定制样式。简而言之，使用::marker伪元素，可以对列表做一些有趣的事情，在本文中，我们将深入的聊聊该伪元素。

大漠_w3cpluscom

CSS Tips：连续动态渐变在如今天丰富多彩的数字创意世界中，“连续动态渐变”无疑是一抹亮丽而生动的色彩。它不仅是设计师手中的一大利器，能为作品注入跃动的生命力，更是用户体验设计中不可或缺的艺术表达手法。今天，我们就来揭开实现“连续动态渐变”背后的技术秘密。

大漠_w3cpluscom

CSS Tips：圆形文本排版在 Web 设计中，排版是至关重要的一环，它直接影响到页面的整体美观度和可读性。而圆形文本排版则是一种独特而引人注目的设计技巧，它能够为 Web 页面注入一份别致和趣味。无论是用于标题、标语还是特殊信息的突出展示，圆形文本排版都能为你的 Web 页面增添一分独特的视觉吸引力。

大漠_w3cpluscom

Web隐藏术在Web 页面或 Web 应用程序的开发中，有些元素是需要被隐藏起来。让一个元素隐藏起来的实现方案会有很多种，只不过每种不同的技术方案实现的原理和最终呈现给用户的渲染方式会有所不同。如果你是一名优秀且专业的 Web 前端开发者，那么在开发应用的时候就需要考虑无障碍（可访问性）相关的细节。那么隐藏元素的不同技术手段对辅助技术（如读屏阅读器）也是有所不同的。在这篇文章中，我们就一起来聊聊 Web 中隐藏术。

大漠_w3cpluscom

你所不知道的CSS overflow最近在项目中使用overflow属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现，原来使用overflow的时候还是有不少的坑，而且这些坑都是因为自己对该属性不甚了解所造成的，或者说是和其他CSS属性在一起使用所触发的。那么在使用overflow应该怎么使用才能避开这些不必要的烦恼呢？或者说在使用overflow不应该和哪些属性结合在一起使用呢？为了解开这个迷我重读了有关于overflow的规范。今天将相关的理解和新的认知小结一下与大家共享，希望对于大家在实际使用的时候能尽可能的避开这些坑。

大漠_w3cpluscom

CSS Tips：水波纹通常情况之下，Web 开发者都习惯了规则的矩形布局的效果，对于 Web 设计师提供的不规则布局，难免会带有一种恐惧与排斥的心理。事实上，**现代 Web 布局**技术构建这些不规则的布局，例如类似杂志类创意布局，不规则图形的布局等，不再是问题。而且现代 CSS 提供了很多新特性，使这件事情变得更容易。要是你将 SVG 相关的特性以及一些工具结合起来，构建这些不规则的布局你可以手到擒来。比如，接下来我们要构建的水波纹布局效果，就是这样完成的。

大漠_w3cpluscom

CSS Tips：CSS 如何穿透 SVG 的 useCSS Tips 系列：在当下，Web 应用或网站上随处可以看到 SVG 的应用。SVG 作为一种灵活的图像格式，已经成为现代 Web 设计的重要组成部分。它不仅允许图像在不同尺寸和分辨率下保持清晰度，还可以实现各种动画效果和交互效果。在许多情况下，我们会使用 SVG 的 <use> 元素来重复利用 SVG 图形，从而提高代码的可维护性和性能。

大漠_w3cpluscom

CSS Tips：用于按钮上的小技巧URL：ui-buttons.web.app/可以说，在 Web 应用或网站上，按钮无处不在。它们是 Web 页面和应用界面中最常见的元素之一，用于触发各种操作和交互。然而，在 CSS 中，我们可以通过各种技巧来改变按钮的外观和行为，使其更加灵活和易用。或许你会说，使用 CSS 给按钮设置样式，从而美化按钮的视觉效果，这是一件非常简单的事情。

大漠_w3cpluscom

图解CSS：CSS自定义属性众所周知，CSS 的维护一直是一项具有挑战性的任务，尤其是在构建大型的 Web 站点或应用程序时，如果是多人协作的话，难度会更大。另外，由于 CSS 语言是一种声明式语言，不像其他编程语言具有变量、条件和逻辑等功能，因此一直处于程序语言的较低层次。

大漠_w3cpluscom

CSS 中的 ∞（无穷）你知道多少众所周知，很多编程语言都提供了两个特殊的数值，用以表示无穷大和无穷小。例如，在JavaScript中，我们使用 Infinity 关键词表示无穷大（∞），而 -Infinity 表示无穷小（-∞）。然而，或许你会感到意外的是，CSS 中同样存在这两个概念——无穷大（infinity）和无穷小（-infinity）。当我第一次得知这个信息时，确实让我感到十分惊奇。这个发现使我觉得 CSS 变得更加神奇有趣。

大漠_w3cpluscom

你真的了解 CSS 的 display 吗经过CSS盒模型和视觉格式化模型的学习，我们有了一个清晰的概念。即在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型，比如说从行内级盒子变成块级盒子。那在这一章节中，我们就来一起探讨CSS的display属性，该属性也是学习CSS不可或缺的属性之一。

大漠_w3cpluscom

图解CSS：条件 CSS在 CSS 的世界中，总是有很多实验性的属性先行，正因为这些先行者在不断的探索新的特性，才让 CSS 越来越强大。而这些实验性的特性并没有立马得到众多浏览器的支持，为了能让这些实验性特性能在部分支持的浏览器上运行，同时又能让不支持的浏览器做相应的降级处理。那么我们就会需要根据相关的条件进行判断。这也就是条件 CSS 的由来。

大漠_w3cpluscom

CSS重要概念：视觉格式化模型大部分 Web 开发者都知道 CSS 中有一个盒模型，但很少有人知道在 CSS 的世界中还有另一个模型，他就是 CSS 的视觉格式化模型。CSS 视觉格式化模型（英文称之Visual Formatting Model），是 CSS 2.2 规范中的第九部分。该模型主要是用来处理在视觉媒体上显示文档时使用的计算规则。仅从这一句话来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是 CSS 中很重要的一部分，如果理解了该部分所涉及到的知识点，将有

大漠_w3cpluscom

CSS Tips：CSS 实现文本淡化效果的不同姿势在 Web 中，我们时常会碰到文本淡化的效果。这里所说的文本淡化不是淡入淡出的动画效果，而是文本（或元素）的一种视觉效果，其显著特征是，由清晰逐渐变得不可见，例如容器中的文本，从顶部到底部逐渐由清晰变得不可见，或者越接近容器两侧边缘不可见。

大漠_w3cpluscom

你可能不太熟知的布局技巧前言，如果你想更系统的掌握 Web 布局技术，请移步阅读《现代 Web 布局》！随着Web技术不断的革新，CSS近几年也变得多年前要更强大。在Web开发中，CSS是不可或缺的一部分，对于很多Web开发者来说，有很多CSS属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日，其中有一些CSS的属性可以让开发者能节约更多的时间。比如说，在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我

大漠_w3cpluscom

图解CSS: 元素尺寸的设置众所周之，Web上的任何一个元素在 CSS 的世界中都会被视为一个盒子，对于该盒子在 CSS 中有一个专业的术语，即 CSS 盒模型。其中 CSS 的display 属性可以改变盒子的格式化上下文，每个格式化上下文都拥有自己不同的渲染规则，而这些规则是用来决定其子元素是如何定位，以及和其他元素的关系，这些关系中也包括了盒子大小。换句话说，Web 中的任何一个元素都是有大小的，即使没有给元素设置任何有关于大小的属性。了解如何设置元素大小是非常重要的，因为它们直接会影响一个元素的渲染，特别是在 Web 布局

大漠_w3cpluscom

图解CSS：CSS 的值和单位CSS 的值和单位是 CSS 另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说，对于 CSS 中的值和单位应该不会感到陌生，但大部分同学应该都会把精力集中于单位这一块，事实上也是如此，在这篇文章中，我们所涉及到的大部分内容也是聊单位这一块，对于值这一部分只会花一点点内容略为带过。