常常感叹于那些富有创造力，绚丽动画的网页是如何被想象出来的，作为开发者，只是在设计工作者头脑风暴出成品之后照样子展现在网页/移动端上，感觉这样好像就缺少最重要的从0->1的那部分。于是乎想学习设计，学

client component vs server component 我们在 page.tsx中导入 Button 自定义组件 由于 nextjs 默认 src之下的组件都是 server com

手写一个文本编辑器demo ，直 最后附完整代码 引用图标库 这里使用font-awesome, cdn地址 使用方法就是搜索需要的图标然后复制样式就行 html结构 结构非常简单 设置

学习next.js发送定制化邮件 首先申请google应用专项密码 google账号 -> 安全性 -> 两步认证 点击申请应用专项密码 复制这个密码，关闭这个窗口就

实现一个linear gradient generator 效果展示 这个demo实现很简单，就是一个方位值和俩个颜色参数，像类似这样

box-shadow 一般我们给一个元素添加阴影效果第一时间想到box-shadow属性，但因其众多参数（X，Y轴偏移、模糊和扩散半径以及颜色参数）不好调试，所以一般也是看网上好看的阴影效果粘贴过来就

属性介绍 stroke：定义svg的轮廓线 常用css属性有 stroke-dasharray（描边的样式），stroke-dashoffset（起始位置），stroke-color（描边

懒加载是一种前端常见优化性能技术，其核心思想是将页面中的资源延迟加载，即按需加载。这种方式有助于减少初始页面加载时间，减轻服务器和带宽的压力，从而加速页面加载速度 举个🌰 比方说当我们开发一个有很多

日常开发中overflow和z-index属性使用还是很频繁的，但是一旦你深入了解这俩个属性其实还不简单!! 就拿我今天遇到的需求来说，直接上原型图！