跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

相关文章标签
calc

13 篇文章
{
,

}
文章的直接链接当然我们可以用 CSS 制作一个显示当前时间的时钟!
calc css 动画 自定义属性

当然我们可以用 CSS 制作一个显示当前时间的时钟!

让我们使用 CSS 自定义属性 和 calc() 函数 来构建一个功能齐全且可设置的“模拟”时钟。然后,我们也将把它转换成一个“数字”时钟。所有这些都不需要 JavaScript!…

Avatar of Mate Marschalko
Mate Marschalko on 2021 年 7 月 16 日
文章的直接链接乌鸦技巧:离容器查询更近一步
calc clamp 容器查询 max min 响应式

乌鸦技巧:离容器查询更近一步

第无数次: 我们需要容器查询 在 CSS 中!你猜怎么着,看起来 我们正朝着那个方向前进。

在为网站构建组件时,你并不总是知道该组件将如何使用。也许它…

Avatar of Mathias Hülsbusch
Mathias Hülsbusch on 2020 年 11 月 12 日
文章的直接链接动画数字计数器
@property calc 内容 计数器 关键帧

动画数字计数器

数字动画,就像想象一个数字从 1 变成 2,然后 2 变成 3,然后 3 变成 4,等等,在指定的时间内。就像一个计数器,只是由我们用来…

Avatar of Carter Li
Carter Li on 2020 年 10 月 9 日
文章的直接链接当 Sass 和新的 CSS 功能发生冲突时
calc css 变量 自定义属性 过滤器 渐变 max min Sass

当 Sass 和新的 CSS 功能发生冲突时

最近,CSS 添加了很多新的酷炫功能,例如 自定义属性 和新的 函数。虽然这些东西可以使我们的生活更轻松,但它们也可能以有趣的方式与预处理器(如 Sass)交互…

Avatar of Ana Tudor
Ana Tudor on 2020 年 6 月 29 日
文章的直接链接使用自定义属性、HSL 和一点 calc() 创建颜色主题
calc 颜色 自定义属性 hsl

使用自定义属性、HSL 和一点 calc() 创建颜色主题

在 CSS 自定义属性 出现之前(我们可能在本文中称之为“变量”,因为这就是它们的本质),在同一网站上实现多种颜色方案通常意味着编写单独的样式表。绝对不是最易于维护的方式…

Avatar of Dieter Raber
Dieter Raber on 2021 年 6 月 26 日
文章的直接链接CSS 计算函数指南
calc 数学

CSS 计算函数指南

CSS 有一个特殊的 calc() 函数用于进行基本数学运算。在本指南中,让我们涵盖有关这个非常有用的函数的所有知识…

Avatar of Chris Coyier
Chris Coyier on 2024 年 8 月 12 日
文章的直接链接CSS 中的柯里化
calc

CSS 中的柯里化

这个时机真有趣,我刚看了 Utopia 的网站(这是一个响应式类型项目,我不得不承认我并不完全理解),我发现了一些他们展示的 CSS,看起来像…

Avatar of Chris Coyier
Chris Coyier on 2020 年 3 月 6 日
文章的直接链接响应式设计和 CSS 自定义属性:定义变量和断点
calc css 变量 响应式

响应式设计和 CSS 自定义属性:定义变量和断点

CSS 自定义属性(又名 CSS 变量)越来越受欢迎。它们终于达到了 不错的浏览器支持,并且正在慢慢进入各种生产环境。自定义属性的流行并不令人意外,因为…

Avatar of Mikolaj Dobrucki
Mikolaj Dobrucki on 2019 年 2 月 26 日
文章的直接链接CSS 变量 + calc() + rgb() = 强制高对比度颜色
无障碍性 无障碍颜色 calc css 变量 自定义属性 rgba

CSS 变量 + calc() + rgb() = 强制高对比度颜色

你可能知道,最近对 CSS 的更新和添加非常强大。从 Flexbox 到 Grid,以及——我们在这里关注的——自定义属性(aka CSS 变量),所有这些都使得健壮和动态…

Avatar of Josh Bader
Josh Bader on 2019 年 10 月 18 日
  • 1
  • 2
  • 更早的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 提要
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.