前面我们已经找到了我们的目的：让 CSS 更加好看！那么好看的目的是什么呢？是让人喜欢。让我们在需求开发时不抗拒去修改原有的代码。那么这就引出了一个问题：什么样的代码让人抗拒去修改？

作者曾所在我司广告事业部，广告承载方式是以刮刮卡、大转盘等活动页进行展示，然后用户参与出广告券弹层。

有业务方反馈，提议我们能不能做一些对页面流失率有提升的优化。

因此针对活动页面的数据情况，我们去做了测试。从测试数据反映，有些页面加载完成率（专业的可以理解为首屏加载率）偏低，但活动页面上一级入口点击率正常。

这种情况有点奇怪啊，但经验告诉我们，一般就是用户在点击上一级入口进来后，由于等待白屏时间过长，用户可能以为白屏是挂了或者忍受不了等待白屏的焦虑，没有耐心就流失了。

怎么去缩短白屏时间呢？

那就是让用户可以更快看到非“白色”，可以能联想到的，背景底色、背景图、关键部位图等。

不知道大家有没有使用过骨架屏，下面我们就是用类似骨架屏的能力去解决这个问题。

变量作为CSS体系里最高逼格的特性无之一，随着浏览器日益完善，变量可大范围在项目里使用，无需关注其兼容性，本文主题是结合另一个特性calc()玩出更多花样，主要是基于变量与JS通讯简化基于JS逻辑。

罗列多种实现水平垂直居中的方式。

在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是百度下解决方案，甚少细究到底，在看《CSS 世界》这本书时看了下 content 章节，今天这里就详细介绍下 content 的使用机制。

content 属性用于与 :before 及 :after 伪元素配合使用，来插入生成内容。使用 content 属性插入的内容都是匿名的可替换元素。首先我们先了解下什么是可替换元素呢？

真的超强，CSS 巧妙运用的极致~

CSS 的魅力！不使用 Javascript 也能完美实现各种文本打点截断及提示。

作为近两年的「新时尚」，暗色/深色模式已经几乎成为了各家系统、应用以及 Web 站点的标配功能。想要支持暗色模式，本质是判断在暗色模式下，更改生效的颜色值。在 Web 站点中，一种简单的做法是通过 CSS 变量 来实现。

使用css实现一个立方体，很简单。有想过怎么来实现一个360°无死角的圆柱体吗？

Grid is a blueprint for making websites.

The Grid model allows us to layout the content of our website. Not only that, it helps us create the structures needed for creating responsive websites for multiple devices.

多行文本展开收起效果可以说是业界一个老大难的问题了，有很多 js 解决方案，但是感觉都不是很完美，希望这个全新思路的 CSS 解决方式能给各位带来不一样的启发。

如何基于 Tailwind CSS 为自己的团队定制一套舒服的 CSS 框架？

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果。

用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

有趣好玩，快来收藏。

通过跳过屏幕外的内容渲染来缩短初始加载时间 在Chr...