你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！ 秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。 马上教你用！✨

在之前，我们有一篇介绍带圆角的渐变边框的纯 CSS 实现的文章： 巧妙实现带圆角的渐变边框 会有这么一个话题的本质在于，在过往，想使用纯 CSS 实现纯粹的，内部透明渐变边框，是一件非常困难的事情，像

截至目前的CSS规范中，直接在border属性上设置渐变是不支持的。border属性没有提供原生的渐变色功能。然而，你可以使用一些技巧来实现类似效果。 以下是两种常用的方法来模拟边框颜色渐变： 方法1

本文解析了通过纯 CSS 实现这个很炫酷的卡片效果，卡片的边框呈渐变色不断变化，极大的提升了用户的交互体验。

to left：设置渐变为从右到左。相当于: 270deg to right：设置渐变从左到右。相当于: 90deg to top：设置渐变从下到上。相当于: 0deg to bottom：设置渐变从上到下。相当于: 180deg (这是默认值，等同于留空不写) 也可以在渐变中…

趁着周末，整理了常用的，使用纯CSS实现的各种渐变效果，包括背景、边框、阴影、文字等，这里所用的渐变全部基于 linear-gradient。