查看“︁用户:晨茗biu～/sandbox”︁的源代码

<templatestyles src="User:晨茗biu～/common.css"/><br>

晨茗biu～的个人css沙盒，用于本人的部分css测试。<br>
测试成功的代码可能会保留，可供各位随意参考或使用。<br>
==像素画==
一个像素画：<br>
<div class="pixelart-to-css"></div>
<br><br><br><br><br>
代码解释：用box-shadow属性填充色块。box-shadow为一种针对图形的阴影属性，该属性可在类型定义中通过调整阴影位置来同时创建多个色块，可简化代码复杂度。该属性的用法为<nowiki>box-shadow: offset-x offset-y blur-radius spread-radius color</nowiki>，其中“blur-radius”“spread-radius”用于调整阴影的模糊程度，在像素画实现中填0或不填（本段代码使用工具直接生成，因此这两个参数都填了0，实际上不填也是没问题的）。“offset-x”“offset-y”分别定义了阴影的在两个方向的偏移距离，单位为“px”，在本段代码中为调整色块的位置。<br>
示例代码：<br>
 .pixelart-to-css {
  /*在创建多个阴影时，不同阴影的设定用“,”隔开*/
  /*阴影位置的设定和单个“像素”的大小成整数关系*/
  box-shadow: 5px 5px 0 0 #303f46, 10px 5px 0 0 #303f46, 15px 5px 0 0 #303f46, 20px 5px 0 0 #303f46, 25px 5px 0 0 #303f46, 30px 5px 0 0 #303f46, 35px 5px 0 0 #ffffff, 40px 5px 0 0 #303f46, 45px 5px 0 0 #303f46, 50px 5px 0 0 #303f46, 55px 5px 0 0 #303f46, 60px 5px 0 0 #ffffff, 65px 5px 0 0 #303f46, 70px 5px 0 0 #303f46, 75px 5px 0 0 #303f46, 80px 5px 0 0 #303f46,/*设置第一行*/
  5px 10px 0 0 #303f46, 10px 10px 0 0 #303f46, 15px 10px 0 0 #303f46, 20px 10px 0 0 #303f46, 25px 10px 0 0 #303f46, 30px 10px 0 0 #ffffff, 35px 10px 0 0 #ffcdd2, 40px 10px 0 0 #ffffff, 45px 10px 0 0 #303f46, 50px 10px 0 0 #303f46, 55px 10px 0 0 #ffffff, 60px 10px 0 0 #ffcdd2, 65px 10px 0 0 #ffffff, 70px 10px 0 0 #303f46, 75px 10px 0 0 #303f46, 80px 10px 0 0 #303f46,/*第二行*/
  5px 15px 0 0 #303f46, 10px 15px 0 0 #303f46, 15px 15px 0 0 #303f46, 20px 15px 0 0 #303f46, 25px 15px 0 0 #303f46, 30px 15px 0 0 #ffffff, 35px 15px 0 0 #ffcdd2, 40px 15px 0 0 #ffcdd2, 45px 15px 0 0 #ffffff, 50px 15px 0 0 #ffffff, 55px 15px 0 0 #ffcdd2, 60px 15px 0 0 #ffcdd2, 65px 15px 0 0 #ffffff, 70px 15px 0 0 #303f46, 75px 15px 0 0 #303f46, 80px 15px 0 0 #303f46,/*第三行*/
  5px 20px 0 0 #303f46, 10px 20px 0 0 #303f46, 15px 20px 0 0 #303f46, 20px 20px 0 0 #303f46, 25px 20px 0 0 #303f46, 30px 20px 0 0 #ffffff, 35px 20px 0 0 #ffcdd2, 40px 20px 0 0 #ffffff, 45px 20px 0 0 #ffffff, 50px 20px 0 0 #ffffff, 55px 20px 0 0 #ffffff, 60px 20px 0 0 #ffcdd2, 65px 20px 0 0 #ffffff, 70px 20px 0 0 #303f46, 75px 20px 0 0 #303f46, 80px 20px 0 0 #303f46,/*第四行*/
  5px 25px 0 0 #303f46, 10px 25px 0 0 #303f46, 15px 25px 0 0 #303f46, 20px 25px 0 0 #303f46, 25px 25px 0 0 #303f46, 30px 25px 0 0 #ffffff, 35px 25px 0 0 #ffffff, 40px 25px 0 0 #ffffff, 45px 25px 0 0 #ffffff, 50px 25px 0 0 #ffffff, 55px 25px 0 0 #ffffff, 60px 25px 0 0 #ffffff, 65px 25px 0 0 #ffffff, 70px 25px 0 0 #303f46, 75px 25px 0 0 #303f46, 80px 25px 0 0 #303f46,/*第五行*/
  5px 30px 0 0 #303f46, 10px 30px 0 0 #303f46, 15px 30px 0 0 #303f46, 20px 30px 0 0 #303f46, 25px 30px 0 0 #303f46, 30px 30px 0 0 #ffffff, 35px 30px 0 0 #000000, 40px 30px 0 0 #ffffff, 45px 30px 0 0 #ffffff, 50px 30px 0 0 #000000, 55px 30px 0 0 #ffffff, 60px 30px 0 0 #ffffff, 65px 30px 0 0 #ffffff, 70px 30px 0 0 #303f46, 75px 30px 0 0 #303f46, 80px 30px 0 0 #303f46,/*第六行*/
  5px 35px 0 0 #303f46, 10px 35px 0 0 #303f46, 15px 35px 0 0 #303f46, 20px 35px 0 0 #303f46, 25px 35px 0 0 #303f46, 30px 35px 0 0 #ffffff, 35px 35px 0 0 #ffffff, 40px 35px 0 0 #000000, 45px 35px 0 0 #ffffff, 50px 35px 0 0 #ffffff, 55px 35px 0 0 #ffffff, 60px 35px 0 0 #ffffff, 65px 35px 0 0 #ffffff, 70px 35px 0 0 #303f46, 75px 35px 0 0 #303f46, 80px 35px 0 0 #303f46,/*第七行*/
  5px 40px 0 0 #303f46, 10px 40px 0 0 #303f46, 15px 40px 0 0 #303f46, 20px 40px 0 0 #303f46, 25px 40px 0 0 #303f46, 30px 40px 0 0 #ffffff, 35px 40px 0 0 #ffffff, 40px 40px 0 0 #ffffff, 45px 40px 0 0 #ffffff, 50px 40px 0 0 #ffffff, 55px 40px 0 0 #ffffff, 60px 40px 0 0 #ffffff, 65px 40px 0 0 #ffffff, 70px 40px 0 0 #303f46, 75px 40px 0 0 #303f46, 80px 40px 0 0 #303f46,/*第八行*/
  5px 45px 0 0 #303f46, 10px 45px 0 0 #303f46, 15px 45px 0 0 #303f46, 20px 45px 0 0 #303f46, 25px 45px 0 0 #303f46, 30px 45px 0 0 #303f46, 35px 45px 0 0 #ffffff, 40px 45px 0 0 #ffffff, 45px 45px 0 0 #ffffff, 50px 45px 0 0 #ffffff, 55px 45px 0 0 #ffffff, 60px 45px 0 0 #ffffff, 65px 45px 0 0 #303f46, 70px 45px 0 0 #303f46, 75px 45px 0 0 #303f46, 80px 45px 0 0 #303f46,/*第九行*/
  5px 50px 0 0 #303f46, 10px 50px 0 0 #303f46, 15px 50px 0 0 #303f46, 20px 50px 0 0 #303f46, 25px 50px 0 0 #303f46, 30px 50px 0 0 #303f46, 35px 50px 0 0 #303f46, 40px 50px 0 0 #ffffff, 45px 50px 0 0 #ffffff, 50px 50px 0 0 #ffffff, 55px 50px 0 0 #ffffff, 60px 50px 0 0 #303f46, 65px 50px 0 0 #303f46, 70px 50px 0 0 #ffffff, 75px 50px 0 0 #303f46, 80px 50px 0 0 #303f46,/*第十行*/
  5px 55px 0 0 #303f46, 10px 55px 0 0 #303f46, 15px 55px 0 0 #303f46, 20px 55px 0 0 #303f46, 25px 55px 0 0 #303f46, 30px 55px 0 0 #303f46, 35px 55px 0 0 #303f46, 40px 55px 0 0 #ffffff, 45px 55px 0 0 #ffffff, 50px 55px 0 0 #ffffff, 55px 55px 0 0 #ffffff, 60px 55px 0 0 #303f46, 65px 55px 0 0 #303f46, 70px 55px 0 0 #303f46, 75px 55px 0 0 #ffffff, 80px 55px 0 0 #303f46,/*第十一行*/
  5px 60px 0 0 #303f46, 10px 60px 0 0 #303f46, 15px 60px 0 0 #303f46, 20px 60px 0 0 #303f46, 25px 60px 0 0 #303f46, 30px 60px 0 0 #303f46, 35px 60px 0 0 #ffffff, 40px 60px 0 0 #ffffff, 45px 60px 0 0 #ffffff, 50px 60px 0 0 #ffffff, 55px 60px 0 0 #ffffff, 60px 60px 0 0 #ffffff, 65px 60px 0 0 #303f46, 70px 60px 0 0 #303f46, 75px 60px 0 0 #ffffff, 80px 60px 0 0 #303f46,/*第十二行*/
  5px 65px 0 0 #303f46, 10px 65px 0 0 #303f46, 15px 65px 0 0 #303f46, 20px 65px 0 0 #303f46, 25px 65px 0 0 #ffffff, 30px 65px 0 0 #ffffff, 35px 65px 0 0 #ffffff, 40px 65px 0 0 #ffffff, 45px 65px 0 0 #ffffff, 50px 65px 0 0 #ffffff, 55px 65px 0 0 #ffffff, 60px 65px 0 0 #ffffff, 65px 65px 0 0 #303f46, 70px 65px 0 0 #303f46, 75px 65px 0 0 #ffffff, 80px 65px 0 0 #303f46,/*第十三行*/
  5px 70px 0 0 #303f46, 10px 70px 0 0 #303f46, 15px 70px 0 0 #303f46, 20px 70px 0 0 #303f46, 25px 70px 0 0 #ffffff, 30px 70px 0 0 #ffffff, 35px 70px 0 0 #ffffff, 40px 70px 0 0 #ffffff, 45px 70px 0 0 #ffffff, 50px 70px 0 0 #ffffff, 55px 70px 0 0 #ffffff, 60px 70px 0 0 #ffffff, 65px 70px 0 0 #303f46, 70px 70px 0 0 #ffffff, 75px 70px 0 0 #ffffff, 80px 70px 0 0 #303f46,/*第十四行*/
  5px 75px 0 0 #303f46, 10px 75px 0 0 #303f46, 15px 75px 0 0 #303f46, 20px 75px 0 0 #ffffff, 25px 75px 0 0 #ffffff, 30px 75px 0 0 #ffffff, 35px 75px 0 0 #ffffff, 40px 75px 0 0 #ffffff, 45px 75px 0 0 #ffffff, 50px 75px 0 0 #ffffff, 55px 75px 0 0 #ffffff, 60px 75px 0 0 #ffffff, 65px 75px 0 0 #ffffff, 70px 75px 0 0 #ffffff, 75px 75px 0 0 #303f46, 80px 75px 0 0 #303f46,/*第十五行*/
  5px 80px 0 0 #607d8b, 10px 80px 0 0 #607d8b, 15px 80px 0 0 #607d8b, 20px 80px 0 0 #607d8b, 25px 80px 0 0 #607d8b, 30px 80px 0 0 #ffffff, 35px 80px 0 0 #ffffff, 40px 80px 0 0 #607d8b, 45px 80px 0 0 #607d8b, 50px 80px 0 0 #607d8b, 55px 80px 0 0 #ffffff, 60px 80px 0 0 #ffffff, 65px 80px 0 0 #607d8b, 70px 80px 0 0 #607d8b, 75px 80px 0 0 #607d8b, 80px 80px 0 0 #607d8b;/*第十六行*/
  height: 5px;
  width: 5px;/*定义单个“像素”大小*/
 }<br>
在实际的运用中，可通过只设定关键像素的位置、对空白像素采用不加设定的方法来压缩代码长度。<br>
为方便测试，本段代码由网站[https://pixelartcss.com/ Pixel Art to CSS]直接生成。<br>

<div class="container-qiuyudao-daoren"><div class="qiuyudao-daoren"></div></div><br>
<div class="container-qiuyudao-daoqiao"><div class="qiuyudao-daoqiao"></div></div><br>
<div class="container-qiuyudao"><div class="qiuyudao"></div></div><br>
==基于老密码盘的文字化改版==
很简单的改版方法，基于原英文密码盘，各位可查看源代码，并根据自己的情况进行改版，甚至不局限于文字解密，而是选择通过相近的思想实现多按钮的页面内容转化，或者搞一些更有趣的玩法。这个密码盘的密码是“我是晨茗”，密码输入错误会自动回到开头。<br>
在源码里，W1，R3这些标识可更根据需求改动，这些是用来区分css类的自定义标识符，本身无特殊含义。

<center><div class="lw-treediv W1">'''[ <sub>Enter Password</sub> ]'''</div>
<div class="lw-treediv W2 R2" style="display:none;" >'''[ *       ]'''</div>
<div class="lw-treediv W3 R3" style="display:none;" >'''[ * *     ]'''</div>
<div class="lw-treediv W4 R4" style="display:none;" >'''[ * * *   ]'''</div>
<div class="lw-treediv H5" style="display:none;" >'''[ <sub>密码正确</sub> ]'''</div>

<span class="lw-treediv W1">
{{TreeButton|show=R2|name=我}}{{TreeButton|show=W2|name=有}}{{TreeButton|show=W2|name=发}}<br>{{TreeButton|show=W2|name=好}}{{TreeButton|show=W2|name=是}}{{TreeButton|show=W2|name=平}}<br>{{TreeButton|show=W2|name=欧}}{{TreeButton|show=W2|name=来}}{{TreeButton|show=W2|name=晨}}<br>{{TreeButton|show=W2|name=茗}}{{TreeButton|show=W2|name=了}}{{TreeButton|show=W2|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=W1|name=backspace}}</span>
<span class="lw-treediv W2"  style="display:none;">
{{TreeButton|show=W3|name=我}}{{TreeButton|show=W3|name=有}}{{TreeButton|show=W3|name=发}}<br>{{TreeButton|show=W3|name=好}}{{TreeButton|show=W3|name=是}}{{TreeButton|show=W3|name=平}}<br>{{TreeButton|show=W3|name=欧}}{{TreeButton|show=W3|name=来}}{{TreeButton|show=W3|name=晨}}<br>{{TreeButton|show=W3|name=茗}}{{TreeButton|show=W3|name=了}}{{TreeButton|show=W3|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=W1|name=backspace}}</span>
<span class="lw-treediv W3"  style="display:none;">
{{TreeButton|show=W4|name=我}}{{TreeButton|show=W4|name=有}}{{TreeButton|show=W4|name=发}}<br>{{TreeButton|show=W4|name=好}}{{TreeButton|show=W4|name=是}}{{TreeButton|show=W4|name=平}}<br>{{TreeButton|show=W4|name=欧}}{{TreeButton|show=W4|name=来}}{{TreeButton|show=W4|name=晨}}<br>{{TreeButton|show=W4|name=茗}}{{TreeButton|show=W4|name=了}}{{TreeButton|show=W4|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=W2|name=backspace}}</span>
<span class="lw-treediv W4"  style="display:none;">
{{TreeButton|show=W1|name=我}}{{TreeButton|show=W1|name=有}}{{TreeButton|show=W1|name=发}}<br>{{TreeButton|show=W1|name=好}}{{TreeButton|show=W1|name=是}}{{TreeButton|show=W1|name=平}}<br>{{TreeButton|show=W1|name=欧}}{{TreeButton|show=W1|name=来}}{{TreeButton|show=W1|name=晨}}<br>{{TreeButton|show=W1|name=茗}}{{TreeButton|show=W1|name=了}}{{TreeButton|show=W1|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=W3|name=backspace}}</span>
<span class="lw-treediv R2"  style="display:none;">
{{TreeButton|show=W3|name=我}}{{TreeButton|show=W3|name=有}}{{TreeButton|show=W3|name=发}}<br>{{TreeButton|show=W3|name=好}}{{TreeButton|show=R3|name=是}}{{TreeButton|show=W3|name=平}}<br>{{TreeButton|show=W3|name=欧}}{{TreeButton|show=W3|name=来}}{{TreeButton|show=W3|name=晨}}<br>{{TreeButton|show=W3|name=茗}}{{TreeButton|show=W3|name=了}}{{TreeButton|show=W3|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=W1|name=backspace}}</span>
<span class="lw-treediv R3"  style="display:none;">
{{TreeButton|show=W4|name=我}}{{TreeButton|show=W4|name=有}}{{TreeButton|show=W4|name=发}}<br>{{TreeButton|show=W4|name=好}}{{TreeButton|show=W4|name=是}}{{TreeButton|show=W4|name=平}}<br>{{TreeButton|show=W4|name=欧}}{{TreeButton|show=W4|name=来}}{{TreeButton|show=R4|name=晨}}<br>{{TreeButton|show=W4|name=茗}}{{TreeButton|show=W4|name=了}}{{TreeButton|show=W4|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=R2|name=backspace}}</span>
<span class="lw-treediv R4"  style="display:none;">
{{TreeButton|show=W1|name=我}}{{TreeButton|show=W1|name=有}}{{TreeButton|show=W1|name=发}}<br>{{TreeButton|show=W1|name=好}}{{TreeButton|show=W1|name=是}}{{TreeButton|show=W1|name=平}}<br>{{TreeButton|show=W1|name=欧}}{{TreeButton|show=W1|name=来}}{{TreeButton|show=W1|name=晨}}<br>{{TreeButton|show=H5|name=茗}}{{TreeButton|show=W1|name=了}}{{TreeButton|show=W1|name=可}}<br>
{{TreeButton|show=W1|name=cancel}}{{TreeButton|show=R3|name=backspace}}</span>

<div style="display:none;" class="lw-treediv H5">
解密成功，锵锵~
</div>
</center>
还有一些byd的想法，比如“左手右手一起慢动作，右手左手慢动作重播”

<center><div class="lw-treediv W6">'''[ <sub>Enter Password</sub> ]'''</div>
<div class="lw-treediv W7 R7" style="display:none;" >'''[ 动作1       ]'''</div>
<div class="lw-treediv W8 R8" style="display:none;" >'''[ 动作1 动作2     ]'''</div>
<div class="lw-treediv W9 R9" style="display:none;" >'''[ 动作1 动作2 动作13   ]'''</div>
<div class="lw-treediv H10" style="display:none;" >'''[ <sub>动作正确</sub> ]'''</div>

<span class="lw-treediv W6">
{{TreeButton|show=R7|name=动动左手}}{{TreeButton|show=W7|name=动动右手}}</span>
<span class="lw-treediv W7"  style="display:none;">
{{TreeButton|show=W8|name=动动左手}}{{TreeButton|show=W8|name=动动右手}}</span>
<span class="lw-treediv W8"  style="display:none;">
{{TreeButton|show=W9|name=动动左手}}{{TreeButton|show=W9|name=动动右手}}</span>
<span class="lw-treediv W9"  style="display:none;">
{{TreeButton|show=W6|name=动动左手}}{{TreeButton|show=W6|name=动动右手}}</span>
<span class="lw-treediv R7"  style="display:none;">
{{TreeButton|show=W8|name=动动左手}}{{TreeButton|show=R8|name=动动右手}}</span>
<span class="lw-treediv R8"  style="display:none;">
{{TreeButton|show=W9|name=动动左手}}{{TreeButton|show=R9|name=动动右手}}</span>
<span class="lw-treediv R9"  style="display:none;">
{{TreeButton|show=H10|name=动动左手}}{{TreeButton|show=W6|name=动动右手}}</span>

<div style="display:none;" class="lw-treediv H10">
解密成功，锵锵~
</div>
</center>
{| class="mw-collapsible mw-collapsed wikitable"
!colspan="1"|  词条页面嵌套测试（测试用例：[[逆魅鸮]]）
|-
| {{碎数研}}{{BDRGC|异想之物}}{{待完善}}
==简介==
四级异想，能够在一定时间内提高和降低个体对另一个体的魅力，因其潜在的危害性而在主要楼层被限制存在，目前主要存在于亚空间[[Decemilia]]中。
==特征==
===体态特征与生活习性===
外观与长耳鸮相似，头顶长有深红色毛发，一般生活在智慧生物聚集区。
<br>
逆魅鸮具有不完全实体性，仅在曙暮时分（或具有相似性质的区域时间段）具有实体，并具有与普通长耳鸮相似的行为模式和生命结构。
===特殊能力===
以实体存在的逆魅鸮会选择视野内的目标并锁定。锁定目标后，逆魅鸮将在短时间内迅速提高目标对另一特定个体的魅力，并在随后的数月内逐渐降低，直到该特定个体对目标产生极大的厌恶。
<br>
该特殊效果仅能由以下方式解除：
*1. 由发动能力的逆魅鸮主动解除。
*2. 发动能力的逆魅鸮死亡。
*3. 自发动能力起时间经过一年自动解除。“一年”为主塔定义下的一年所对应的时间（将该段时间长度以t表示）。无论目标处于何等时间流速，目标需度过以目标自身为基准的长度为t的时间，此后效果将自动解除。

逆魅鸮一般倾向于选择具有相互恋爱倾向的男女（或族群中具有类似身份的一对个体）中的一位作为目标，另一位则作为受目标魅力影响的个体。一只逆魅鸮同一时间仅能锁定一个个体作为目标，已成为其他逆魅鸮的目标的个体无法被锁定。

|}
为土星论坛设计的模板用例：
{{SaturnForum|晨茗|488/9/27 01:54:52|17|一段来自土星论坛的留言}}