蓝白碗画布！！

效果： |880x511

为练习CSS - INDEX，我将会参考JIEJIO个人网站的这个页面，做一个以蓝白碗为配色主题的，有关mio的一个画布展示

颜色主要参考TV版动画中出现的蓝白碗颜色，一个浅蓝，一个在阴影下的深蓝

:root {
    --mio-blue-light:#91a7f2;
    --mio-blue-deep:#4c60a6;
}

无限画布画布，主要参考JIEJIO的这个教程

过程当中遇到了一个图片的显示难题，在网站中，限定图片的大小为500px * 350 px，但有关mio的图片分辨率各式各样，该如何统一处理这些图片尺寸且又不失真是我需要解决的问题

问了Gemini，核心解决方法是缩放并裁剪，例如我的网站要求渲染500* 350 尺寸的，就需要把原图按照（500/350）约等于1.43的长宽比进行缩放，然后选取中间部分，裁剪剩余的部分

像是这样的逻辑，可以直接通过大厂家的OSS存储桶服务自动执行，例如我把一张无损格式的任意分辨率的图片放在存储桶中，前端访问这个图片的URL以及携带几个参数：resize,m_fill,w_500,h_350（阿里云的），就能自动帮我缩放裁剪，无需自行裁剪

这是个不错的方案，我可以直接通过图床上传图片，无需担忧裁剪以及更新问题

但问题又来了，如果想让前端访问到这些图片的URL，要么直接硬编码在js中，要么直接通过FaaS来访问RDS 实例返回URL以及相关信息的列表。

但是第二种好麻烦，我只是想练练CSS而已，只不过后续做好1.0过后给他人分享一下，也不清楚会不会继续做下去，如果继续做的话还是得乖乖用数据库

还是先直接硬编码吧，后续如果有更多人想看的话再考虑升级为数据库

我先用索引来命名所有图片，放在阿里云OSS存储桶当中，直接遍历的时候用索引就能拿到文件名了，这样就能直接复制给img的src属性

正在为“MIO”这个字符串收集合适的字体

BBH Sans Bartle：

BBH Sans Hegarty

Archivo Black

纯黑背景还是有些单调，我看能不能给他一些蓝白条纹背景还真有，在渐变 Gridiant中，有个 repeating-linear-gradient()可以实现

我发现：#91d8f2这个颜色与MIO的蓝白条纹的颜色互补，且非常灵动，好看，考虑作为我自己的标志色或者主题色

在部署到阿里云服务器的时候，发现手动配置nginx文件后还需要手动开操作系统的防火墙端口号，之前用宝塔面板的时候估计是自动帮我操作了这一步

原来在视口之外，开发者也可以定义主题色以更加契合自身的网站

	<!-- 浏览器工具栏的颜色 -->
	<meta name="theme-color" content="#91d8f2">

就是theme-color,能让

探索