sinat_33255495的博客

为了让你明白这个工具到底有多炫酷，先来几张图震撼一下你吧：你相信吗，上边这些图都是 js 实现的哦，真真不是ps的成果，是不是很强大。接下来，我们一起学习一些这个 processing 怎么实现这些炫酷效果吧。据说这个 工具是高效艺术系的课程,主要用于制作数字艺术作品、数据可视化作品和互动多媒体艺术作品等，可以实现动态表单、处理手势、定义行为，还可以模拟自然系统以及整合其他各种媒介，最重要的是他是一种开发语言，是一门非常非常简单的开发语言。 主要以 JAVA 为主，可以实现跨平台，目前主流的浏览器都支持

正常我们可以通过 rgba 或者 hsla 来实现半透明背景效果，但是用在边框上却会失效。其实有一个神奇的属性 background-clip 只要加上他，奇迹就会出现啦。具体代码如下：效果如图：这里我偷懒用了纯色的背景，其实换成背景图会更好看。

我们可以通过 skew() 的变形属性将矩形进行斜向拉伸：实现效果：需要注意的是：如果要把这个效果应用到行内元素，需要把 display 属性设置为: inline-block 或 block

【代码】渐变背景及边框实现。

SVG使用CSS的fill属性来填充元素的颜色。通过定义CSS规则，可以轻松地修改SVG图形的颜色。使用fill属性可以修改SVG形状的填充颜色，使用stroke属性可以修改SVG形状的描边颜色。SVG使用stroke属性来定义和修改图形元素的描边颜色。

（1）dataset：所有放在data-*中的属性都在dataset中（2）getAttribute()方法获取color: red;这一定限度上解决了 css 无法获取变量的问题。

当你创造一个元素加上这个属性后，会使得这个元素后面的区域添加效果（如模糊或颜色偏移）

其实就是一个 inset 就解决了，主要是用的太少，不太熟悉这个属性。知识点：box-shadow。

直接上代码：

最终实现的效果：变形函数中使用百分比值时，是以这个元素自身的宽度和高度为

CSS优化

currentColor 是 CSS3 中增加的一个颜色关键字，是 CSS 有史以来的第一个变量。它借鉴自 SVG，这个关键字并没有绑定到一个固定的颜色值，而是解析为 color。有网友解释为：CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。它可以应用于元素的 color、background-color、border 等属性中，也可以作用

需求：实现两行多列布局，列的数目不定，左右可以滚动。实现思路：使用的知识点：flex 弹性布局先固定父元素高度，然后用flex纵向排列（ flex-direction: column;）。然后子元素高度设置为父元素一半，这样一纵列只能放下两个元素，然后超出换行 （flex-wrap: wrap;），元素就自动向右排列了。html:<ul> <li></li> <li></li> <li>&lt

今天在阅读 vite 官方文档的时候看到了这个词，有的面试题中也会提到，所以拿出来记录一下。什么是FOUC(文档样式短暂失效)?全称：FOUC - Flash Of Unstyled Content 文档样式闪烁如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。IE会首先加载整个HTML

要实现的效果：HTML<section class="father"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </section>CSS.father { display: flex; p

最近学习了一个新的 css 属性：position：sticky。在开发中还是蛮实用的，记录下来，分享给需要的小伙伴。知识点position: sticky; 基于用户的滚动位置来定位。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。需要注意的是想用它，必须要设置一个方向值（top, left, right, bottom）场景描述我写了一

什么是粘连布局（css sticky footer）当main的高度足够长的时候，紧跟在后面的元素会跟在其后面;示例如下：当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部。示例如下：这种情况我们称为粘连布局。粘连布局的布局方法粘连布局由三个组成部分：wrap容器,main内容,footer脚部<div id="main"> <div class="main"> main<br>

本地缓存与浏览器缓存的概念好多同学都分不清楚，今天我们来简单说一下。其实它们的差别还是挺大的：服务对象本地缓存：整个 web 应用程序浏览器缓存：只服务于单个页面可选择性本地缓存：可以指定要缓存 哪些页面浏览器缓存：可以缓存所有网页安全性本地缓存：可靠，可以手动控制缓存页面及进行相关操作浏览器缓存：不安全，不可靠...

我发现好多同学对 H5 的本地存储是个一知半解的状态，而这有时面试或工作中必须掌握的知识点，所以今天借着闲暇时间整理一下相关的知识，希望可以帮助需要的同学。web storage机制是对H4中 cookies 机制的一次升级 ，解决了一系列 cookies 的缺点。比如大小：cookies 大小限制在 4KB带宽：cookies 是随 HTTP 事务一起发送的，所以会浪费部分带宽。复杂性：我们知道正确操作 cookies 是很困难的。而web storage 存储机制，可以在客户端本地建立一个

一、BFC 是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。　　Formatting contextFormatti

首先要定义盒子的宽和高，只需将 border-radius 设为高度的一半即可实现。.radius{ width: 300px; height: 200px; background: red; border-radius: 100px;}实现效果：

word-wrapword-wrap属性用来指出浏览器在单词内进行断句，防止字符串太长而找不到它的自然断句点时产生的溢出。word-wrap: break-word;text-overflowtext-overflow用于文本溢出:单行缩略的实现如下:.oneline { white-space: nowrap; //强制文本在一行内输出 overflow: hidden; //隐藏溢出部分 text-overflow: ellipsis; //对溢出部分加上...}

简述在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。目前浏览器的排版引擎有三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards m

什么是置换元素？一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。也可以理解为，浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器根据标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。html中的<img>、<input>、<textarea>、<s

word-spacing： 针对英文字母的间距，对中文不生效letter-spacing：针对中文字之间的间距

重新整理了css语法才发现，自己平时的书写很不规范，为了让自己看 上去像个大神，要好好约束下自己呢。现在分享给码友们，建议你们都好好看一下语法用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应...