SegmentFault 思否技术周刊 Vol.72 — 使用 CSS 实现一个足球场

本期技术周刊一起了解 CSS，欢迎大家阅读 ～

文章推荐

万能的 CSS 渐变！单标签绘制一个足球场 // XboxYan

世界杯正在进行中，也不要忘记学习 CSS，比如，用 CSS 绘制一个足球场？

一眼望去，这里的形状只有圆形和矩形，在不借助其他标签的情况下（包括伪元素），其实很容易联想到渐变，一起看看如何绘制的吧，有非常多的渐变小技巧~

温馨提示：文章中带有“⚽️”的描述属于足球小知识，不感兴趣的可以跳过，与 CSS 无关

CSS 如何设置自动滚动定位的“安全”间距？ // XboxYan

• 默认情况下自动滚动定位都是与滚动容器贴边的，有时候并不美好
• scroll-padding和scroll-margin可以在自动滚动定位时预留指定的间距
• scroll-margin作用对象是目标元素，scroll-padding作用对象是滚动容器
• 滚动定位方式有锚点定位、scrollIntoView定位、focus定位、还有Scroll-snap定位
• 体验增强属性，兼容性还不错，主要是safari拖后腿

基于一段神奇的 CSS 渐变制作噪点效果 // 南城FE

提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的 gif 动图，真实的情况噪点的变化速度会快很多，这里为了 gif 的大小，截取的时间较短供参考。

这就是今天文章的主题，我们要基于 CSS 来实现这个效果。当然除了 CSS 之外，使用 SVG，canvas 之类的也是可以实现的，本文使用 CSS 渐变的一个技巧，但在实际的项目中要斟酌使用，且此效果在不同的浏览器中会所不同。

快速构建页面结构的 3D Visualization // chokcoco

本文，就将介绍一种，快速通过 CSS，构建页面深度关系的 3D 视图，快速清晰的厘清页面 DOM 层级及深度之间的关系。并且可以运用在不同的节点单独进行观察。

当然，总体而言，是基于：CSS 选择器、CSS 3D 属性的一次大规模综合应用，整体看完，相信你能学到不少东西。

23 个 CSS 动画效果，持续更新中 ... // 水冗水孚

使用方式：

• 看名称效果图，有没有和自己想要的效果类似的
• 有的话，复制粘贴代码使用
• 也可以自己修改一下
• css效果并不是特别难，只是有时候我们可能想不到
• 笔者空闲时间，会继续更新的哦，点赞关注不迷路^_^

注意：一些代码思路，笔者写在代码注释中去了

两行 CSS 让页面提升了近 7 倍渲染性能！ // 南玖

对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重，其实你如果了解页面从加载到渲染完成的整个过程，就知道应该从哪方面下手了。

嗯，不要跑偏了，今天我们主要来研究长列表页面的渲染性能

问答推荐

• 想请问大家一个关于 flex 布局方面的问题 ？
• CSS 样式的问题？
• CSS 如何对 class 进行分类？
• html、css 怎么实现一个圆盘（类环形图）？
• 渐变背景，带透明分隔，请问怎么实现图片效果？
• 问一个关于 css 选择器使用的问题？
• 前端页面 div 上有凹下去的梯形效果怎么实现？
• 怎样让圆形盒子里的 a 标签居中呀？

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。

每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。

如有问题可以添加小姐姐微信~