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>运行的实例
