CSS 的全称是 Cascading Style Sheets，即层叠样式表， 是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）元素所呈现的样式。
小编整理了思否社区关于 CSS 的优质技术文章，欢迎大家阅读 ~
📖 文章推荐
借助强大的 CSS 以及一些有意思的技巧，我们利用纯 CSS 实现了这两个看似非常复杂的转场动画效果，并且，这在之前，是完全不可能使用纯 CSS 实现的。
normal：表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
light：表示可以使用操作系统亮色配色方案渲染元素。
dark：表示可以使用操作系统深色配色方案渲染元素。
基于 CSS mask-image 实现炫酷图片过渡效果之星球大战
在给公司开发官网的过程中，会有涉及到一些图片的鼠标悬停效果，鼠标悬停后会改变原图，单纯的渐隐渐现，放大缩小，左右平移已经满足不了产品经理期望了，总觉得不够惊艳，创意不够。其实作为一个开发者，也不会满足这普通日常的动画交互效果，在寻找新的 idea 时发现基于 CSS mask-image 可以实现很多不错的效果，本文将基于此属性实现四种图片过渡动画效果。
这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画
- 数字的变化
- 缩小和放大
- 透明度变化
不知道小伙伴能否观察出来呢？下面来一起来看看具体实现吧
其中，要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的。那么，仅仅使用 CSS 能否实现该效果呢？
嘿嘿，强大的 CSS 当然是可以的。本文，就将带领大家一步步使用纯 CSS，完成上述效果。
日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3 变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止一种时，我想这肯定是极好的，使用不同的方法达到同一的效果，或者某天所遇到的问题就迎刃而解了。
如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。
但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了
relative 来限制 absolute，然后 bottom: 0，但是在内容过长的时候会导致显示异常。所以我们需要做内部滚动。
如果做内部滚动，那么我们只要可以撑开盒子即可。不需要绝对定位了
📖 问答推荐
- CSS 一个样式问题，底部多出一块白色的区域？
- 超出隐藏使用了 -webkit-line-clamp: 2; 为什么第三行也展示出了一部分？
- 【CSS】如何实现圆弧形状的切角？
- 请问这样的数字应该怎么用 CSS 来写呢？
- CSS 怎么实现两个 div 一个固定宽另一个填充剩余空间？
- CSS 如何实现动态 loading 效果？
- CSS 计算宽度问题
- CSS 多行文本，如何实现距离可调的下划线？
- 请问大家关于一个 CSS 节点选择器的问题
- CSS 命名规范
👇课程推荐
《简明 CSS 教程》
课程链接：https://ke.segmentfault.com/c...
课程收获
- CSS 作为 Web 前端开发中必备的技能之一，由于其知识点多，内容杂，使用起来又非常的灵活，如果没有经过系统地学习，非常容易产生挫败感。本系列课程依据讲师自身的经验，系统地编排了 CSS 当中的知识点，由浅入深，从基础到复杂，从理论到实践，手把手地介绍 CSS 当中最核心的知识点。
- 在实际的工作中，异常灵活的 CSS 会给团队开发带来不必要的麻烦。本系列课程除了介绍知识点之外，更注重实际工作的意义，让同学们不仅能够掌握 CSS 的知识，更能掌握实际工作中应该注意的点，让理论和实际得以结合，无缝衔接学习和工作。
PS：大家想看哪些方面的技术内容，可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。