要点：
1.伪元素选择器
写法：E::before E::after （E代表元素，如下面的div元素为例）
作用：在div中内容部分的最前面和最后面添加content属性，文本内容可以为空。但是注意，content是行类元素，自己本身也是一个盒子，所以我们这里可以使用相对定位。
2.CSS3的border-box盒子模型
传统的也是默认的盒子模型是content-box模型，它保证了W3C的标准Box Model。它是外加式的，加上内边距和外边距，原来定义的盒子会不断的变大，这时我们就可能回过头将定义的盒子宽高减去内外边距。
border-box应运而生，他是内减式的，他不会改变整体的盒子的大小。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 632px;
height: 340px;
position: relative;
/*子决父相*/
border-radius: 10px;
overflow: hidden;
/*父盒子还是默认的content-box模型,加上外边距会超出*/
}
div:hover::after{
/*鼠标经过之后，添加伪元素选择器*/
content: "";
position: absolute;
/*内容尾部添加::after伪类选择器，也是盒子，只不过是行内元素*/
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 20px solid rgba(199,91,91,0.5);
box-sizing: border-box;
/*转换为CSS3盒子模型，内减式*/
}
</style>
</head>
<body>
<div>
<img src="mi.jpg">
</div>
</body>
</html>运行的实例
