想象一下，如果你在面试中被问到，“你能实现冒泡排序吗”？你自信满满地回答面试官，“当然，你想问的是用JavaScript还是CSS呢？”。大佬风范迎面而来。你可能会嗤之以鼻，这有啥好炫耀的呢，“没有面试官会对实现一个模拟冒泡排序的动画印象深刻，好吧?”。你说的没错！但是，如果我们创建的这个冒泡排序算
2024-03-13
近年来，Tailwind CSS 在前端开发领域备受关注，在GitHub上收获了70000+ Star。尽管市面上有众多的 CSS 框架可供选择，但 Tailwind CSS 凭借其独特的概念、强大的特性和灵活性越来越受到开发者的喜爱。那么，为何 Tailwind CSS 如此受欢迎呢？本文将深入探
2024-03-07
今天我们要介绍100多个使用单个元素制作的CSS丝带。是的，只用到一个元素。这可不是用旧的和过时的代码制作的CSS丝带，而是用现代CSS制作的，并对CSS变量进行了优化。没有幻数也没有固定尺寸。随你所愿可以将所有丝带放置于任何内容之中，通过调整变量即可轻松控制。只需单击一下即可复制丝带的CSS代码，
2024-03-07
将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景
2024-03-04
Servo网络引擎项目发布了一篇新的博客文章，概述了他们在2月份取得的所有成就。 对于铁锈编写的Servo Web布局引擎来说，这是忙碌的过去几周。这个新的开源项目在2月份取得的一些成就包括： -Servo现在整个CSS测试套件中都超过了它的传统布局引擎。 -支持IMAGE/SVG+XML M
2024-02-28
随着前端开发的不断发展，CSS 的功能日益强大，其中 @规则扮演着举足轻重的角色。它们不仅扩展了 CSS 的功能边界，还为开发者提供了更加灵活和高效的样式定义方式，让我们来一同探索这些强大而实用的 @ 规则吧！@font-face@font-face 用于使用自定义字体。它的基本用法包括定义一个字体
2024-02-27
今天来分享一个前端必备的工具，其每天在 npm 上的下载量高达 1000 万次，几乎每个前端项目都在用，它就是 PostCSS。这款工具已经成为前端开发领域中不可或缺的一部分，之所以如此受欢迎，不仅是因为它能够帮助开发者自动化处理 CSS 中的兼容性问题，更是因为它提供了一个强大的插件生态系统。这些
2024-02-26
本文来分享 12 个超级实用的CSS 技巧，帮助你充分发挥 CSS 的优势，优化用户体验。user-selectuser-select 属性可以用来控制用户是否能够选择文本。 You can't select this text. You can select this text.CSS：d
2024-02-26
大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。本期共享的是 —— 那些我们可以开始使用或提前预习的 CSS 现代属性。有时，优化我们 App 的 CSS 只需要一行代码就能升级或增强！了解 12 个现代化属性，将其合并到项目中，享受减少技术债务、删除 JS，以及轻松赢得用户体验
2024-02-19
导读：本文介绍 Bootstrap、Tailwind、Foundation、Bulma、UIKit等UI/CSS框架，让我们一起探索 2024 年最佳 CSS 框架。为自己的项目选择正确的 CSS 框架非常的关键，也非常地重要，此举会为构建新的 UI 组件所需的整体工作定下基调。目前最重要的是更快地
2024-02-15
在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。text-decoration 文字
2024-01-30
思科的VSS（Virtual Switching System）和华为的CSS（Cluster Switch System）是两家不同厂商提供的解决方案，旨在提供高可用性、冗余和容错性的网络设计。 厂商 VSS：思科的解决方案。 CSS：华为的解决方案。 架构
2024-01-29
在平时开发中，有时候会碰到这样的彩色阴影，效果如下：是不是非常有质感？下面分别介绍 CSS 和 SVG 两种实现方式，一起看看吧！一、实现原理从设计上看，其实原理很简单，一张原图和一张模糊的图，叠加在一起就行了，示意如下：那么具体如何实现呢？接着往下看。二、CSS 滤镜首先，单纯的 CSS并不能直接
2024-01-29
除了……之外Firefox 122为了让它今天变得稳定，谷歌还将他们的Chrome121网络浏览器推广到其稳定渠道。 Chrome 121今天发布，它的发布恰好与Firefox 122正面交锋。Chrome121有17个安全修复程序，其中包括三个高CVE。Chrome 121中的安全修复程序可以通
2024-01-24
前不久看到这样一个很有趣的效果，它的滚动条是沿着圆角边缘滚动的，效果如下你可以查看原链接来体验一下https://codepen.io/jh3y/pen/gOEgxbd。这是如何实现的呢？原效果中由于为了兼容不支持CSS滚动驱动的浏览器，特意用 JS做了兼容，所以看着比较复杂，其实核心非常简单，下面
2024-01-22
作者简介 19组清风，携程资深前端开发工程师，负责商旅前端公共基础平台建设，关注NodeJs、研究效能领域。一、引言三年前 Facebook 开始思考在目前设计系统下面临的问题，那时它们在前端项目、系统组件等部分使用的是 cssmodule 的样式方案。直至今日，Facebook 已经将所有的 We
2023-12-29
CSS（层叠样式表）是前端开发领域的主要技能之一，用于实现网站设计的视觉呈现。虽然您可能已经熟悉许多 CSS 属性，但仍有一些较少讨论的属性可以增强您的样式设计能力。在今天这篇文章中，我将通过代码片段与你分享15 个 CSS 属性。让我们直接开始吧。1、accent-color当涉及到复选框和单选按
2023-12-19
之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一个伪元素设置和背景相同的颜色覆盖实现的，如下：：时代在进步，CSS也在不断发展。 CSS 容器查询[1
2023-12-18
CSS Text Module Level 4 中的四项新国际 CSS 功能即将登陆 Chrome 浏览器。本篇文章将介绍哪些功能已经发布，哪些功能即将发布。从 Chrome 119 开始：日语短语换行与断字：word-break: auto-phrase。开发中：使用 text-spacing-t
2023-12-14
如果你和我一样觉得 Sass 的 CSS 嵌套功能非常有用，那么你一定会很高兴地知道，我们的好日子就要来了。因此，如果你不知道，Sass 的 CSS 嵌套功能允许您将 CSS 选择器嵌套在其他选择器中。例如，你可以这样写：.parent { .child { color: r
2023-12-13