跳到主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 洗牌
搜索

文章标签
css variables

31 篇文章
{
,

}
文章的直接链接:响应式设计和 CSS 自定义属性:构建灵活的网格系统
css 变量 flexbox 网格 响应式

响应式设计和 CSS 自定义属性:构建灵活的网格系统

上次,我们研究了在响应式设计中声明和使用 CSS 自定义属性的几种可能方法。在本文中,我们将更深入地了解 CSS 变量及其在可重用组件中的应用方式...

Avatar of Mikolaj Dobrucki
Mikolaj Dobrucki 于 2019 年 2 月 26 日
文章的直接链接:响应式设计和 CSS 自定义属性:定义变量和断点
calc css 变量 响应式

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

CSS 自定义属性(也称为 CSS 变量)正变得越来越流行。它们最终获得了 相当不错的浏览器支持,并正在慢慢进入各种生产环境。自定义属性的流行并不令人意外,因为...

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

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

如你所知,CSS 的最新更新和新增功能非常强大。从 Flexbox 到 Grid,以及我们这里关注的 自定义属性(也称为 CSS 变量),所有这些都让构建健壮而动态的...

Avatar of Josh Bader
Josh Bader 于 2019 年 10 月 18 日
文章的直接链接:使用 CSS 切割和划分圆盘
clip-path CSS css 变量 自定义属性

使用 CSS 切割和划分圆盘

我最近遇到一个有趣的圆盘切片设计。圆盘有一个对角渐变,并被分成水平切片,从左到右略微偏移。自然地,我开始思考什么是最有效的方式...

Avatar of Ana Tudor
Ana Tudor 于 2019 年 1 月 13 日
文章的直接链接:使用 CSS 变量进行 DRY 状态切换:回退和无效值
calc css 变量 自定义属性 技巧

使用 CSS 变量进行 DRY 状态切换:回退和无效值

这是两部分系列文章中的第二篇,探讨了 CSS 变量如何用于简化复杂布局和交互的代码编写,并使其更易于维护。第一篇...

Avatar of Ana Tudor
Ana Tudor 于 2018 年 12 月 6 日
文章的直接链接:使用 CSS 变量进行 DRY 切换:一个声明的差异
css 变量 自定义属性 技巧

使用 CSS 变量进行 DRY 切换:一个声明的差异

这是两部分系列文章中的第一篇,探讨了 CSS 变量如何用于简化复杂布局和交互的代码编写,并使其更易于维护。这篇文章...

Avatar of Ana Tudor
Ana Tudor 于 2018 年 12 月 6 日
文章的直接链接:使用 CSS 自定义属性构建超强网格组件
css 变量 自定义属性 网格 布局

使用 CSS 自定义属性构建超强网格组件

不久前,我写了一篇广受好评的文章,介绍了 将 CSS 变量与 CSS 网格结合起来,以帮助构建更易于维护的布局。但 CSS 网格不仅仅用于页面!这是一个普遍的误解。虽然它确实非常有用...

Avatar of Michelle Barker
Michelle Barker 于 2018 年 9 月 5 日
文章的直接链接:使用 CSS 变量和 Houdini 魔术构建简单的交互式饼图
图表 圆锥渐变 css 变量 自定义属性 houdini

使用 CSS 变量和 Houdini 魔术构建简单的交互式饼图

当我偶然发现这个 交互式 SVG 饼图 时,我产生了做一些类似事情的想法。虽然 SVG 代码尽可能简洁(只有一个 <circle></circle> 元素!),但使用描边来创建饼图...

Avatar of Ana Tudor
Ana Tudor 于 2018 年 9 月 26 日
文章的直接链接:使用 CSS 切换不同背景的字体颜色
无障碍 CSS css 变量 hsl rgba

使用 CSS 切换不同背景的字体颜色

你是否曾在观看别人展示 JavaScript 的强大功能时,脑海中浮现过“我可以用 CSS 做到!”的想法?这正是我在观看 Dag-Inge Aas 和 Ida Aalen 在 CSSconf EU 2018 上的演讲 时产生的感觉。

他们正在...

Avatar of Facundo Corradini
Facundo Corradini 于 2018 年 8 月 18 日
  • 较新
  • 1
  • 2
  • 3
  • ...
  • 4
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发动态

订阅我们精心制作的时事通讯

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

© 2024 . All rights reserved.