之前项目中遇到这里总结下：

这个原理主要是使用了 ::before或者::after 这个伪元素，和 :hover 这个伪类，

关于伪类和伪元素需要知道：

伪类及在当前元素被出发后添加一些CSS样式，伪类与伪元素是预先定义的，独立于文档元素的，能后被浏览器自动识别，处于特殊状态的元素称为伪类，伪元素指元素中特变的一部分。伪类：以“：”开始，在冒号前后不能出现空白。

伪元素可以在触发之后添加一些，不在文档树里的内容。伪类：伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树中并不存在与之对应的部分。

想做成这个样子，这个ElementUI的上传组件的样式。

做完之后是这个样子的：

可能我们还需要知道一点定位的知识；CSS提供三种定位机制：普通流，定位(position)，浮动(float)。

position属性：

可以将元素从页面流中偏移或分离出来，然后设定其具体的位置(top,bottom,right,left)，属性值如下；

当position的属性值为relative，absolute或fixed时，可以使用元素的偏移属性进行重新定位，当属性为static时,会忽略偏移属性以及z-index等相关属性。使用绝对定位相对定位时，会出现元素重叠，可以使用z-index属性设置元素之间的叠放顺序，取值为auto或数值时，数值越大越上层。在页面坐标中存在X右Y下Z外，

然后我们看一个Demo

Hello, world!

CSS

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。