css

当在mdn看到text-shadow属性的示例时，他可能是下面这样的，平平无奇 但是，这个属性其实是可以设置多个值的，如果在配合点背景色或者其他东西，他也可能是下面这样的 效果1：不同的人，不同的距离

方案一 效果： 关键点： 1、ul采用grid布局，如果一行要展示n个六边形，则一行分为2n+1列 2、每个六边形占两列的宽度，并使用aspect-ratio和clip-path将每块裁剪成六边形

contain属性用于将元素及其子元素独立于文档的其他部分，和bfc比较类似 其取值可以是： none 按照默认方式渲染 size 父元素的大小计算与子元素大小无关 inline-size 父元素的横

content-visibility目前是一个实验性的属性，不过用来渐进式的优化渲染性能也是不错的，当然如果我们要在生产环境使用，还是要采用成熟的虚拟列表方案 content-visibility取值

pages类是页面的静态部分静态部分，也就是灰色的线框部分 active-page类是页面的动态页，控制页面翻转的整体 嵌套的flip类将翻转的页面分割成一块一块的，并且每一块的旋转是基于父元素的旋

今日目标：基于background-size和background-position的聚焦效果 该效果的主要特点是边框的进方向和出方向是相反的 这里拿上边框来举例 这里定义了一个变量sp（为什么是s

除开border，background也能实现很多的边框装饰效果 今天要实现的效果： 该效果的实现完全是依靠background，其由8个渐变背景组成 左上水平线条 linear-gradient(

内容预告：今天我们用border实现一个加载效果 先让我们看下我们的目标，然后我们一步步实现它 现在我们来实现它 这个效果的关键在于如何实现飞线，即下面这个东西，这个效果其实就是由4条下面这种飞线组

内容预告：这里不会告诉你什么是border，怎么用border，而是让你知道它们能做到什么 先来看一个效果，这便是我们的目标，它主要使用border和background实现 现在，我们来一步步的实