CSS 控制边框长度、颜色、位置

1、之前碰到一个需求，就是在div的边上有一个小的竖条样式，之前是用一个图片然后使用定位移动到div的边上，这样比较麻烦，后来网上找了找资料，看看是否能用CSS来实现改变边框的长度，大多数都是使用的伪类选择器，但是都是直接贴的代码，正好前阶段遇到这个问题，来写个demo记录一下：

2、思路：我们通过伪类选择器配合content在元素的周围设置内容，我们设置content为""，然后通过修改样式来实现边框的效果。

3、案例：我们首先创建一个div，然后在div左边调一个边框样式：（只需要一个div）

<div id="div1">lalala</div>

css：使用伪类选择器：

#div1{
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
#div1:before{
	content: '';
	position: absolute;
	left: 5px;
	bottom: auto;
	right: auto;
	height: 60px;
	width: 3px;
	background-color: blueviolet;
}	

注意：我么这里需要注意的是，在我们设置该div的伪类选择器为绝对定位的时候，我们最好将父类设置为相对定位，这样便于更好的控制其边框的位置，否则，他将会按照body进行定位，这样在设置多个div带有边框样式的时候会非常难以控制。

实现效果：也可以自行调整，宽度高度颜色等等…

你要去做一个大人，不要回头，不要难过。

“守好你的心事，不要告诉任何人。”