什么是最酷/最好/最糟糕的CSS滥用？

例如，这些形状，或使用多个框阴影制作像素图。

人气竞赛结束于14/04/14。

一些花花公子创建了一个工具，可以将任何图像转换为纯CSS。这远远超出了CSS的初衷。

这是一个示例（著名的蒙娜丽莎）：http : //codepen.io/jaysalvat/pen/HaqBf

这是工具：https : //github.com/jaysalvat/image2css

快速更改图像

我不一定会称其为滥用，但是您可以使用CSS将CSS替换为IMG，SRC以显示完全不同的图像。

@media print
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

参见：https : //stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

与@media选择器结合使用可以带来很多乐趣，从而在打印网页时显示完全不同的图像。（PDF顺便说一句，可以用同样的方法完成。很高兴看到正在打印文档的那个人的脸，所有漂亮的图表都被漂亮的女士们所取代：）

可调整大小的元素：

您可以添加resize:both以允许用户调整元素的大小。
在某些浏览器上，仅在上支持<textarea>。

实时CSS预览：

这不是真正的CSS，但是您可以添加contenteditable属性，添加属性style="display:block;z-index:99;width:500px;height:500px;resizable:both;"并编辑CSS。

样式化的CSS复选框/单选按钮：

以以下标记为例：

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

您可以display:none在<input>和上使用CSS3选择器，并可以设置“ sprite”背景以显示复选框/单选按钮的不同状态。

元素的顺序很重要，将for=""属性与id=""输入中的匹配更加重要！

您可以在此处看到一些示例：http : //www.csscheckbox.com/

浏览器特定的选择器：

我们都尝试过将CSS类别和媒体查询与javascript混合使用...

好吧，这是一些针对浏览器的选择器：

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

对于IE，您有大量的选择器。不需要更多。

我想这取决于您所说的滥用是什么意思，但这将使您的用户变得笨拙：

抖动

*:hover{
  zoom:99%;
}

（当您将鼠标悬停在页面上时，所有东西都会抖动）

专家交换/付费观看效果

*{
  color:transparent;
  text-shadow:0 0 5px rgba(0,0,0,0.5);
}

（使所有文本模糊）

使用CSS精灵表格的“动画GIF”

http://jsfiddle.net/simurai/CGmCe/light/

（Java的“ The Dude”挥舞着他的手）