深圳幻海软件技术有限公司

最近在拜读张鑫旭大神的《CSS世界》，其中很多思维非常值得借鉴学习，特别是对CSS控制显隐的总结，非常到位，记录一下使用CSS让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别。对于元素的显示隐藏这种交互式的行为，应该由于JavaS

SassSass全称"SyntacticallyAwesomeStyleSheets",是CSS的一种扩展语言。变量VariableSass允许使用变量（最新的CSS也支持了变量）。可以在Sass中声明变量，并为它赋值。在Sass中，变量以$开头的，后跟变量名。$text-color:red;使用c

在上一篇 CSS如何根据背景色自动切换黑白文字？中，讲述了文本自适应背景色的一些小技巧，不过还存在一定局限性，比如：如果是背景是渐变色该怎么办？很容易想到的思路是将两个渐变色取过渡中间色，然后再通过前面的方式转换就行了。那么问题来了，有没有办法通过CSS实现中间颜色的获取呢？下面来一起探讨

前言​随着CSS的不断发展，一些很酷且有用的属性要么完全被忽视，要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性，这些属性你可能听说过，也可能没听说过，但了解之后你会觉得它们是如此的实用。:is​和:where伪类选择器​这两个伪选择

移动优先的设计方法很棒——它专注于对用户真正重要的东西，它被很好地实践，并且多年来一直是一种常见的设计模式。所以开发你的CSS移动优先也应该很棒……对吧？嗯，不一定。经典的移动优先CSS开发基于覆盖样式声明的原则：您从默认样式声明开始您的CSS，并在min-width为更大的视口添加断点时覆盖和/或

如今，网络上的每个网站或Web应用程序都需要大量的CSS代码来使事物看起来既漂亮又出众。我认为如果不使用CSS，我们将永远不会有一个可以脱颖而出的优秀网页设计。CSS是一种非常有用的样式表语言，它主要用于实现网站或Web应用程序设计的外观。通过使用CSS，我们可以轻松地设置网页样式，同时也能实现响应

CSS生成器可以帮助每个开发人员的生活变得轻松，提升工作效率，因为它可以立即实现大部分CSS效果，如阴影、边框、按钮颜色/形状等等。在本文中，我将分享19个实用的CSS代码生成器，每个开发人员都会发现它们在他们的日常工作中很有用。1、Neumorphism.io地址：https://neumorph

可视化正则表达式Regulex你是不是看到正则表达式犹如遇见魔鬼，看不懂也学不会?别担心，推荐一个能将正则表达式可视化的工具-Regulex，使用图形可视化效果展示JavaScript正则表达式，非常方便的帮助程序员正确的书写正则表达式规则。美化展示代码carbon是否经常看到别人博客或者文章使用像

来了来了，它终于来了，动画杀手锏@scroll-timeline[7]本文将介绍利用CSS实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。关于使用CSS实现滚动视差效果，在之前有一篇文章详细描述过具体方案-CSS实现视差效果[1]，感兴趣的同学可以先看看这篇文章。这里，会

在线正则表达式可视化Regulex是一个正则表达式的可视化开源工具，直接输入正则表达式就能用可视化显示出来。并且能够导出svg格式图片以及获取固定链接，比如下图这样。这样无论自己用还是给别人讲解，都是非常方便的。在线Postman这个需要注册才能使用，不过如果自己有安装类似应用就可以不用。Postm

现在（2022）的Web开发在工具选择上真是太多了，就「前端样式」 [注] 一项任务就有很多技术供选择，本文说说CSS三项主流技术的特点和区别。注：web开发可分为后端（RH开发的MVC），前端（V组件的UI结构，样式和交互）多种任务本文在此文（ SASSvsCSS-i

最近有个小伙伴问我，在某个网站[1]看到一个使用SVG实现的炫彩三角边框动画，问能否使用CSS实现：很有意思的一个动画效果，立马让我想起了我在CSS奇思妙想边框动画[2]一文中介绍的边框动画，非常的类似：其核心就是利用了角向渐变(conic-gradient)，然后将图案的中心区域通过覆盖遮罩一个小

CSS代码生成器你是否曾经尝试记住如何声明渐变，文本阴影，Flexbox或Grid的CSS属性，仅举几例？不容易。除非你一再使用某些CSS功能及其属性，否则很难记住所有这些功能。但是，即使是精通CSS的人有时也需要对某些属性进行复习，尤其是如果他们有一段时间没有使用它们了。如果你需要一些最新和最伟大

 Vue3新增了一条实验性的功能——「单文件组件状态驱动的CSS变量」详见： https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md看到这个，我脑子里有

给大家整理了25个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站，希望可以帮助到大家!CSS相关1. CSSBattle-在线比拼CSShttps://cssbattle.dev在线比拼CSS，一个挺有趣的竞争性游戏，一共有12个级别，需要你用

 前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSSbackground属性，还可以使用SVG。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。在本文中，我们会学习引入图像的各种方式，以及每种方式的优点和缺点，以及何时使用和为什么使用它们。H

CSSGridGeneratorCSSGridGenerator是一个由SarahDrasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的grid布局，然后就可以使用生成对应的代码，帮助咱们快速布局。第一次进入是界面是这样子的：CSSGrid布局示例当我正在学习一些东西时，我发现

作为一名前端，开发web页面是我们的本职工作。在完成一个页面开发的过程中，保存代码然后手动刷新页面查看效果，这样的动作需要重复无数次，虽然一次这样的动作可能只要花费几秒钟的时间，但是次数多了也挺浪费时间的。社区有一款工具可以帮助前端在每次保存完代码后自动刷新浏览器页面——livereload。自动刷

开头还是来一段废话：年关将近，给大家拜个早年，愿大家年会都能抽大奖，来年行大运。废话不多说，直接进正文。项目环境：前端vue项目，需要将新增的几个路由页面做seo处理。在调研插件prerender-spa-plugin后，发现无法满足vuex以及plugins等要求时，果断选用了nuxt.js做服务