谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 题目1、下面这个图形，只使用一个标签，可以有多少种实现方式：

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

假设我们的单标签是一个 <code>div</code>:

定义如下通用<code>CSS</code>：

这个应该是最最最容易想到的了

一个标签，算上 <code>before</code> 与 <code>after</code> 伪元素，其实算是有三个标签，这也是很多单标签作图的基础，本题中，使用伪元素可以轻易完成。

盒阴影 <code>box-shadow</code> 大部分人都只是用了生成阴影，其实阴影可以有多重阴影、单侧阴影、阴影不可以不虚化，这就需要去了解一下 <code>box-shaodw</code> 的每一个参数具体作用。使用 <code>box-shaodw</code> 解题

盒阴影还有一个参数 <code>inset</code> ，用于设置内阴影，也可以完成：

<code>drop-shadow</code> 是 CSS3 新增滤镜 <code>filter</code> 中的其中一个滤镜，也可以生成阴影，不过它的数值参数个数只有 3 个，比之 box-shadow 少一个。

灵活使用 CSS3 的渐变可以完成大量想不到的图形，CSS3 的渐变简单而言分为线性渐变和径向渐变，本题使用线性渐变，可以轻易解题：

这个用的比较少，outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。这个方法算是下下之选。

抛开实用性，仅仅是模拟出这个样式的话，这个方法真的让人眼前一亮。

　　

上述就是想到的 8 种方法，不排除有没想到的，希望有其他的方法可以在评论中提出，具体 8 种实现可以戳这里看看：

<a href="https://codepen.io/Chokcoco/pen/PGkgRX">codepen-单标签左边竖条的实现方式</a>

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。