自 CSS3 问世以来，在广大开发者的智慧下诞生了很多创造性的设计，如：18个你可能不相信是用CSS制作出来的东西。个人平时也喜欢收藏这些有趣的东西，其中一些设计对单个 HTML 元素的极限利用，很值得我们去学习。

以下就来说一说这些神奇的黑科技。

伪元素

伪元素是比较常见的单元素利用了，:before与:after基本上支持普通元素的所有 CSS 属性，它使 1 个元素可以当作 3 个元素来使用。

比如制作一个单元素的菜单图标，三条线。

.icon-menu {
    position: relative;
}
.icon-menu,
.icon-menu:before,
.icon-menu:after {
    width: 1em;
    height: .25em;
    background: #666;
}
.icon-menu:before,
.icon-menu:after {
    content: '';
    position: absolute;
    left: 0;
}
.icon-menu:before {
    top: .3125em;
}
.icon-menu:after {
    top: .625em;
}

在辅以圆角、CSS三角等，一些看起来复杂的图标也不是不能实现。
Github 早已有 css 图标的项目了：Cikonss。

实际场景中的应用不限于此，如：下拉菜单上的三角箭头、时间线上的圆点标记（在我的博客归档页就是此种）等。
当你需要添加一些无内容的修饰性元素时，你就该想到使用伪元素。但也不是说有内容的用伪元素无法实现，一些静态的展示内容也可以用，可以利用伪元素content属性。

比如一个带统计数量的badge，对应的 html 可以这样写。

<span data-count="10" class="badge">消息</span>

在 css 中利用伪元素展示自定义属性。

.badge:after {
    content: attr(data-count);
   /* ... */
}

我的博客 PC 端文章页右侧的分享所用的 tips 就是利用伪元素纯 css 实现的。

border

border实现 css 图形的案例已经屡见不鲜了，实际应用中常用的还是三角形。

既然提到了border，也应该顺带提下outline。两者都可以肆意的实现各种长短粗细的线条，一些特殊的场景中一条粗边框就可当作一个矩形来利用。还拿菜单图标来说，设置上下两个边框样式，outline 在画上一条，可以通过outline-offset来调整间距，是不是也能凑出一个图标呢。

除了使用border绘制多边形外，其实扇形、弧线也是可以很容易实现的。

/* 扇形 */
.sector {
    width: 0;
    height: 0;
    border: 30px solid #000;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
}
/* 弧线 */
.arc {
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
}

具体是什么效果，自测吧。

扇形、弧线可以轻易的制作一个 loading 效果：css实现的各种loading效果。

box-shadow

box-shadow可以设置元素阴影效果，且可以设置多组值。但是我万万没有想到它居然强大如斯：1个元素实现的像素画。

先看下box-shadow的文档介绍压压惊。

box-shadow: [inset] offset-x offset-y [blur] [spread] [color];
值说明
inset可选，默认阴影在边框外。使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下。
offset-x/offset-y必需，用来设置阴影偏移量。offset-x设置水平偏移量，如果是负值则阴影位于元素左边。offset-y设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了blur或spread则有模糊效果。
blur可选，模糊距离。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为 0，此时阴影边缘锐利。
spread可选，阴影的大小。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
color可选，阴影的颜色。

平常使用中一般会设置 4 个值来实现阴影效果，即offset-x、offset-y、blur、color。从属性介绍中看当blur省略后，默认值为 0，边缘锋利，也就是小方块的效果。而通过设置每一组offset-x、offset-y的偏移值，加上不同的颜色设置，的确是实现像素画的绝妙之想。

当前博客的404页面就是用box-shadow堆叠出来的。

相关资源分享：

原来这个世界还有另外一种 css：别人手中的 css。