chokcoco_社区达人页

你所不知道的 CSS 负值技巧与细节

你所不知道的 CSS 负值技巧与细节

CSS 属性选择器的深入挖掘

CSS 属性选择器的深入挖掘

探秘 flex 上下文中神奇的自动 margin

探秘 flex 上下文中神奇的自动 margin

CSS 火焰？不在话下

CSS 火焰？不在话下

不可思议的纯 CSS 实现鼠标跟随效果

不可思议的纯 CSS 实现鼠标跟随效果

有趣的 box-decoration-break

有趣的 box-decoration-break

不可思议的纯 CSS 滚动进度条效果

不可思议的纯 CSS 滚动进度条效果

探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

你所不知道的 CSS 阴影技巧与细节

你所不知道的 CSS 阴影技巧与细节

滚动视差？CSS 不在话下

滚动视差？CSS 不在话下

神奇的选择器 :focus-within

神奇的选择器 :focus-within

妙用 scale 与 transfrom-origin，精准控制动画方向

妙用 scale 与 transfrom-origin，精准控制动画方向

不可思议的纯CSS导航栏下划线跟随效果

不可思议的纯CSS导航栏下划线跟随效果

区块链 PoW 与 PoS 的纷争

区块链 PoW 与 PoS 的纷争

不可思议的混合模式 background-blend-mode

【前端性能】Web 动画帧率（FPS）计算

我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。 有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状况，从而更好的优化它们，本文就是介绍 Web 动画帧率（FPS）计算方法。

【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

关于 chrome 扩展的文章，很久之前也写过一篇。清除页面广告？身为前端，自己做一款简易的chrome扩展吧。 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。   什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。

盒子端 CSS 动画性能提升研究

不同于传统的 PC Web 或者是移动 WEB，在腾讯视频客厅盒子端，接大屏显示器（电视）下，许多能流畅运行于 PC 端、移动端的 Web 动画，受限于硬件水平，在盒子端的表现的往往不尽如人意。 基于此，对于 Web 动画的性能问题，仅仅停留在感觉已经优化的OK之上，是不够的，想要在盒子端跑出高性能接近 60 FPS 的流畅动画，就必须要刨根问底，深挖每一处可以提升的方法。

你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节，本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！ 系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。 废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。

不受控制的 position:fixed

大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。

纯 CSS 实现波浪效果！

一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。

CSS 样式书写规范

可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。 我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。

神奇的 conic-gradient 圆锥渐变

感谢 LeaVerou 大神，让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟： linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并且使用过的。

奇妙的 CSS shapes(CSS图形)

CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。

谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（十六）-- 奇妙的 background-clip: text

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

一道面试题引发的对javascript类型转换的思考

最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对于一个好奇的切图仔来说，忍不住动手尝试了一下，看到题目首先想到的是会用到高阶函数以及 Array.prototype.reduce()。

深入探讨 CSS 特性检测 @supports 与 Modernizr

什么是 CSS 特性检测？我们知道，前端技术日新月异的今天，各种新技术新属性层出不穷。在 CSS 层面亦不例外。 一些新属性能极大提升用户体验以及减少工程师的工作量，并且在当下的前端氛围下： 很多实验性功能未成为标准却被大量使用； 需要兼容多终端，多浏览器，而各浏览器对某一新功能的实现表现的天差地别； 所以有了优雅降级和渐进增强的说法，在这种背景下，又想使用新的技术给用户提供更好的体验，又想做好回退机制保证低版本终端用户的基本体验，CSS 特性检测就应运而生了。

使用 position:sticky 实现粘性布局

如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; }...

谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

【Web动画】SVG 实现复杂线条动画

在上一篇文章中，我们初步实现了一些利用基本图形就能完成的线条动画： 【Web动画】SVG 线条动画入门 当然，事物都是朝着熵增焓减的方向发展的，复杂线条也肯定比有序线条要多。 很多时候，我们无法人工去画出一些十分复杂动画的线条，这个时候，就要借助前端好帮手 PS 和 AI，而本文就是介绍如何导出复杂的 SVG 路径。

【Web动画】SVG 线条动画入门

通常我们说的 Web 动画，包含了三大类。 CSS3 动画 javascript 动画（canvas） html 动画（SVG） 个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

引人瞩目的 CSS 变量（CSS Variable）

这是一个令人激动的革新。 CSS 变量，顾名思义，也就是由网页的作者或用户定义的实体，用来指定文档中的特定变量。 更准确的说法，应该称之为 CSS 自定义属性 ，不过下文为了好理解都称之为 CSS 变量。

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

【CSS进阶】试试酷炫的 3D 视角

写这篇文章的缘由是因为看到了这个页面： 戳我看看（移动端页面，使用模拟器观看） 运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。

【前端安全】JavaScript防http劫持与XSS

作为前端，一直以来都知道HTTP劫持与XSS跨站脚本（Cross-site scripting）、CSRF跨站请求伪造（Cross-site request forgery）。但是一直都没有深入研究过，前些日子同事的分享会偶然提及，我也对这一块很感兴趣，便深入研究了一番。

神秘的 shadow-dom 浅析

说到 shadow-dom 可能很多人会很陌生。但是其实我们肯定碰到过，本文主要想简单介绍下 shadow-dom。下面直接进入正文。   shadow-dom 是什么 顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。