CSS
关注
分享
扫一扫
文章平均质量分 90
蟹蟹蟹风流
修罗社区 | 掘金优秀创作者 | 清华大学出版社签约作者 | Web3 开发者 | CSDN 银牌讲师 | 蓝桥云课2021年度人气作者Top2 | 工信部蓝桥认证命题人 | CSDN 博客专家 | 腾讯云2022 年度优秀作者 | 阿里云专家博主 | 华为云享专家 | 著作：《前端面试复习笔记》|《Web3 开发系列教程》|《ThreeJS 在网页中创建动画》|《ElementUI 详解与实战》|《PWA 渐进式Web应用开发》
展开
-
我至今没想到，我也能在 CSS 中实现 SVG 动画了
动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同，现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致，不仅提升用户体验，还吸引用户关注重要的元素，以传达信息。本篇文章我们就来一起学习学习如何在 CSS 中实现 SVG 动画。原创 2023-08-14 19:30:32 · 2741 阅读 · 0 评论 -
【你不知道的 CSS】你写的 CSS 太过冗余，以至于我对它下手了
你写的 CSS 太过冗余，有什么更好的方法改善呢？原创 2023-03-19 14:59:53 · 2131 阅读 · 1 评论 -
14 行 CSS 代码实现明暗模式
最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反，它通过CSS 媒体查询来检测用户的系统设置，并使用两个自定义CSS属性来确定一个基本的配色方案。定义 2 个自定义的 CSS 属性CSS 自定义属性也被称为 CSS变量或级联变量。你可以在 CSS 文件的任何地方定义 CSS 自定义属性，它们遵循与其他 CSS 规则相同的级联和特定模式。例如，您可以在 document root 中定义 CSS 变量，并在更具体的 CSS类 中覆盖它们。您还可以检查和调试浏览原创 2022-05-17 08:01:42 · 559 阅读 · 1 评论 -
【CSS】Grid 栅格布局学习笔记
前端修罗场提供全网最专业的前端优质文章与社区服务，为应届生，初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务！内容包含：前端面试辅导，前端面试题，前端交流，前端答疑，前端基础知识，前端知识体系，技能树搭建，Javascript，CSS，CSS3，HTML，React，Vue，小程序，前端简历，职业交流，远程工作，英文交流，英文提升，外企，互联网，国企，大厂，牛客面试题，掘金面试题，面经，优质前端文章分享...原创 2019-06-23 22:39:44 · 1890 阅读 · 0 评论 -
CSS 自定义属性进阶使用 （二）
CSS 自定义属性 进阶（二）模块化CSS通常，为了实现可复用可定制的模块，我希望将某个实现抽象化。例如，下面这段CSS代码：.grid { display: flex; flex-direction: row; flex-wrap: wrap; padding: calc(var(--margin) / 2);}.grid > .cell { displa......原创 2019-06-19 21:59:29 · 482 阅读 · 0 评论 -
【CSS】CSS自定义属性进阶使用（一）
进阶使用CSS自定义属性在之前一篇介绍CSS自定义属性的文章中，我们介绍了什么是CSS自定义属性，var()、calc()。本篇文章中，为了进一步使用它，我们将介绍CSS自定义属性的其他用法。自定义原则在传统的CSS中，通常我们需要写重复的属性值，而自定义原则能让我们避免这种情况。做到“一处定义，处处使用”。:root { --theme-color: gray;}.button......原创 2019-06-19 17:44:00 · 738 阅读 · 0 评论 -
CSS自定义属性：引入 | 使用var() | cal()计算 | css 与 js 的连接
CSS 自定义属性CSS 自定义属性 （也被称为 CSS 变量）,目前从 Can I use 上获取的信息显示除了 Edge外主流浏览器的最新版都已经支持这个特性了，而 Edge 也将支持这个属性。考虑兼容尚未实现此特性的浏览器，那目前最好的选择就是使用 PostCSS。本篇要点：自定义属性的概念var()calc()引入自定义属性，是一种开发者可以自主命名和使用......原创 2019-06-19 16:16:54 · 3534 阅读 · 2 评论 -
媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data
当我们在使用APP时，我们在 `设置`中常会发现这么一项操作：如`无图模式`、`夜间模式`等等，这些设置项来自对用户偏好的考量。为了打造轻应用的进展中，在web中也将逐步实现这样的特性。今天，我们就来了解一下关于在web中打造用户偏好的特性...原创 2019-03-10 17:02:46 · 1852 阅读 · 0 评论 -
【前端3分钟】布局
布局结构网页布局结构，通常分为三种：通栏 多栏又分为：等分多栏与非等分多栏 布局方式固定布局：使用像素（px）作为页面基本单位；弹性布局：使用百分比（%）作为页面基本单位；混合布局：使用像素（px）和百分比（%）两种单位作为页面单位。通常而言，通栏、多栏等分结构的布局，适合使用弹性布局；而多栏非等分的布局，适合使用混合布局。布局变化当进行...原创 2018-04-12 15:49:59 · 1012 阅读 · 0 评论 -
【CSS】浅谈 CSS 中常用的相对长度单位 em, rem
前端修罗场提供全网最专业的前端优质文章与社区服务，为应届生，初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务！内容包含：前端面试辅导，前端面试题，前端交流，前端答疑，前端基础知识，前端知识体系，技能树搭建，Javascript，CSS，CSS3，HTML，React，Vue，小程序，前端简历，职业交流，远程工作，英文交流，英文提升，外企，互联网，国企，大厂，牛客面试题，掘金面试题，面经，优质前端文章分享...原创 2017-11-16 12:31:41 · 3887 阅读 · 0 评论 -
CSS 基础代码库整理
前端修罗场提供全网最专业的前端优质文章与社区服务，为应届生，初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务！内容包含：前端面试辅导，前端面试题，前端交流，前端答疑，前端基础知识，前端知识体系，技能树搭建，Javascript，CSS，CSS3，HTML，React，Vue，小程序，前端简历，职业交流，远程工作，英文交流，英文提升，外企，互联网，国企，大厂，牛客面试题，掘金面试题，面经，优质前端文章分享...原创 2016-06-19 17:55:07 · 2587 阅读 · 0 评论 -
【CSS】最核心的几个概念
⭐️ 本文首发自 前端修罗场，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。HTML 的元素可以分为两种：两者的区别在于以下三原创 2016-03-12 08:24:41 · 595 阅读 · 0 评论 -
【CSS】处理兼容性问题 | CSS Hack | IE
CSS hack 主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。一般来说，只有IE6不支持 !important所以可以这样因为!important 具有最高优先级，所以此种方式可以区别出来~（1）IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。这种问题主要就是会把某些元素挤到了第二行。解决的方式有两个：(2) 行内属性标签，为了设置宽高，我们经常就会设置成display：block,产生IE6双边距bug；解决办法：（原创 2016-02-26 15:54:35 · 1066 阅读 · 0 评论 -
【CSS】禅意花园--心得分享
当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子、家具等。但，这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。——What Lies Beneath如果字体设置了bold、italic或者oblique等属原创 2016-01-30 11:37:30 · 2518 阅读 · 0 评论