如题。
效果如下：
大概思路：主要通过设置元素的阴影效果
首先创建两个嵌套的div标签，使用table标签也可以。
ps:其实创建一个也可以，但用嵌套的修改时候更方便~
那么基本的代码如下：
<div id="rq">
<div id="te"></div>
</div>
对嵌套外的div设置。
#rq {
position: absolute;
}
接下来就是对id名为te的div元素进行样式设置。
对单个像素设定宽度和高度。
#te {
height: 10px;
width: 10px;
box-shadow:
}
接下来就是重点！
怎么画出这一个个阴影块，并转换成样式代码
https://pixelartcss.com/
在这个页面下画出像素画，并将它生成的代码全部复制到#te选择器下。
ps:为了方便,使用原网页的选择器。
修改上面的代码，如下：
<div id="rq">
<div id="pixelart-to-css"></div>
</div>
点击copy,将复制的代码填到{}里。
#pixelart-to-css{
# 这里是复制的代码
}
注意！！原代码是.pixelart-to-css，一定要改成#pixelart-to-css才可以。
因为嫌弃颜色不够还原，所以找了下星露谷原来的配色。
以下数值是从网上搜到的哈哈哈。
在嵌套的div上先列一下所需要用到的色号，以及位置。
#rq {
--brown: #6b3710;
--dark-red: #c22323;
--light-red: #ff4e23;
--yellow: #ffd921;
--white: #ffe1ae;
--tan: #dda059;
--dark-tan: #994f16;
position: absolute;
}
具体的阴影代码就不贴了，太长了。
感兴趣的话这里贴个表格代码。
不知道字数够不够小鱼缸。
效果如下：
大概思路：主要通过设置元素的阴影效果
首先创建两个嵌套的div标签，使用table标签也可以。
ps:其实创建一个也可以，但用嵌套的修改时候更方便~
那么基本的代码如下：
<div id="rq">
<div id="te"></div>
</div>
对嵌套外的div设置。
#rq {
position: absolute;
}
接下来就是对id名为te的div元素进行样式设置。
对单个像素设定宽度和高度。
#te {
height: 10px;
width: 10px;
box-shadow:
}
接下来就是重点！
怎么画出这一个个阴影块，并转换成样式代码
https://pixelartcss.com/
在这个页面下画出像素画，并将它生成的代码全部复制到#te选择器下。
ps:为了方便,使用原网页的选择器。
修改上面的代码，如下：
<div id="rq">
<div id="pixelart-to-css"></div>
</div>
点击copy,将复制的代码填到{}里。
#pixelart-to-css{
# 这里是复制的代码
}
注意！！原代码是.pixelart-to-css，一定要改成#pixelart-to-css才可以。
因为嫌弃颜色不够还原，所以找了下星露谷原来的配色。
以下数值是从网上搜到的哈哈哈。
在嵌套的div上先列一下所需要用到的色号，以及位置。
#rq {
--brown: #6b3710;
--dark-red: #c22323;
--light-red: #ff4e23;
--yellow: #ffd921;
--white: #ffe1ae;
--tan: #dda059;
--dark-tan: #994f16;
position: absolute;
}
具体的阴影代码就不贴了，太长了。
感兴趣的话这里贴个表格代码。
不知道字数够不够小鱼缸。
