1、在 Vue2/3 中 dom 拖动，Ctrl + 鼠标滚轮放大缩小 dom，可以使用 @panzoom/panzoom 库实现具体实现
2、npm 下载插件包 npm install @panzoom/panzoom -S
3、在需要的页面按需引入（也可以全局引入）, 详细见下文代码块
4、通过 @wheel 事件监听鼠标滚轮，调整 dom 大小（@wheel 是只有当我们滚动鼠标滚轮的时候，才会触发）

• 现在，在使用 <ul> 或 <ol> 时，自定义数字或项目符号的颜色、大小或类型很简单。
• 利用 css 的 :marker 伪元素，我们可以很轻易的更改内容以及项目符号和数字的某些样式。
• ::marker 伪元素它作用在任何设置了 display:list-item 的元素或伪元素上。

在 HTML 中， <figure> 和 <figcaption> 是用于包含视觉内容和相关说明的元素。该元素通常用于图像、图表、插图或其他媒体内容的语义标记。通过使用这些标签，我们可以更好地将内容和结构信息分离，提升网页的可读性和可访问性。在创建一个复杂和内容丰富的网页时，合理地使用这些标签不仅能增强网页的语义，也有助于搜索引擎优化（seo）。

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width , margin , padding , font-size , border-width , 等。

长度有一个数字和单位组成如 10px , 2em , 等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

结合上一篇写的光环的光函数，去理解和在创造下面这个在数字孪生中常见的护盾 shield 。

mdb https://www.shadertoy.com/view/sdKXzd	xor https://www.shadertoy.com/view/cltfRf	FabriceNeyret2 https://www.shadertoy.com/view/M32GW3

所有 demo 和代码可以在 https://www.shadertoy.com/view/X3sBR7 查看

在传统 3D 里面，纹理都是离线制作好，结合物体的形状生成的 UV 贴图。Shadertoy 中我们一切都是实时生成的。也就是我们需要更具实时生成出来的形状 找到对应面的纹理坐标。

在一些数字孪生场景特效中，常常有光环的设计。本文在 shadertoy 找了以下三个光环的实现，并解释其实现原理

2D 的光很简单，一般都有以下类似的函数，当 2D 平面的点离发光位置越远，光就衰减了。

# 国外超火的前端框架：Astro 5.0 正式发布！

Astro 5.0 带来了全新的 内容层 (Content Layer) 和 服务岛 (Server Islands) 功能，实现了从任意来源加载内容的能力，并将静态缓存内容与动态个性化内容完美结合，进一步提升开发效率和网站性能。

# 什么是 Astro？

Astro 是专注于构建内容驱动型网站（如博客、营销和电商）的现代 Web 框架，以快速加载和优秀的 SEO 表现为核心优势。

这篇文章对 flex 不熟也可以看。这篇文章只讲这三个属性。为了简单化，不会提到主轴交叉轴，也不讲方向，默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。

# new URL(url, import.meta.url).href

new URL(url, import.meta.url).href

说明：第一个 url 为图片的相对路径