CSS checkbox特性下的元素的显示与隐藏实例页面

展示

FireFox 19支持（其他都不行，目前）将canvas内容导出为二进制数据图片，默认导出无损24-bit PNG图片。可设置格式，例如导出为90%质量的jpg图片，则使用：toBlob(callback, "image/jpeg", 0.9); 做了个简单的demo演示：canvas导出为图片实例页面。
收起↑展开↓

代码

核心CSS代码：

.test_checkbox,
.test_more,
.test_hide,
.test_checkbox:checked ~ .test_label .test_show {
    position:absolute;
    left: -999em;
}

.test_checkbox:checked ~ .test_more,
.test_checkbox:checked ~ .test_label .test_hide {
    position: static;
}
            

主要HTML代码：

【社交游戏的鲸鱼理论】...互动。
<input type="checkbox" id="testToggleCheckbox" class="test_checkbox" />
<span class="test_more">最后他们得出的结论...投资。</span>
<label class="test_label" for="testToggleCheckbox">
    <span class="test_hide">收起↑</span>
    <span class="test_show">展开↓</span>
</label>