多语言展示
当前在线：1323今日阅读：145今日分享：14

css如何制作文件图标
网页开发过程中，为了增加页面的用户体验，增加页面的美观，常常会添加一个小图标。小图标的制作方法有很，最常用的就是使用Sprite背景图片实现一个图标，Sprite背景图片实现一个图标会存在一个弊端，修改图标的颜色或大小时，需要修改Sprite背景图片图。而CSS3生成的小图标在修改颜色或大小时只需要修改css样式即可，从而节省了不少时间。思路： 文件图标 = 一个缺少右边框的矩形 + 一个缺少左边框的矩形 + 一个三角型。
方法/步骤
1

打开前端开发工具，新建一个html文件。如图

2

在html文件上找到,在里面创建一个

标签，然后给这个标签添加一个class类（案例中类为：file-icon）。如图：代码：

3

找到，在<title>标签后面创建一个<style>标签，然后在<style>标签中设置class类的样式，制作一个缺少有边框的矩形。画一个矩形框，给这个矩形上、下、左这三条边框设置颜色和大小。如图：代码：<style type='text/css'> .file-icon{ width: 3.2em; height: 5em; border-top: 0.4em solid #333; border-bottom:0.4em solid #333; border-left:0.4em solid #333; margin: 50px auto; position: relative; }</style></p></div><div class="listcon"><span>4</span><p>保存html文件后使用浏览器打开，即可看到缺少有边框的矩形。如图</p></div><div class="listcon"><span>5</span><p>使用before伪样式设置一个缺少左边框的矩形，这个矩形要和上面的矩形底部对齐，并且高度小于上面的矩形。如图：代码：.file-icon:before{ border-right: 0.4em solid #333; border-bottom: 0.4em solid #333; width: 1em; height: 4em; position: absolute; right: -1.3em; bottom: -0.4em; content: ''; }</p></div><div class="listcon"><span>6</span><p>保存html文件后使用浏览器打开，即可看到效果。如图</p></div><div class="listcon"><span>7</span><p>最后使用after伪样式制作一个三角形，这个三角形用于连接第一个和第二个矩形空白处，这样就可以看到一个文件图标了。如图：代码：.file-icon:after{ position: absolute; top: -0.4em; right: -1.3em; content: ''; border-bottom: 1.4em solid #333;    border-right: 1.4em solid transparent; width: 0; height: 0; }</p></div><div class="listcon"><span>8</span><p>保存html文件后使用浏览器打开，即可看到效果。如图：</p></div><div class="listcon"><span>9</span><p>所有代码。可以直接把下面的所有代码复制粘贴到新建的html文件上，保存后运行即可看到效果。所有代码：<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>文件小图标

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2026 www.onijiang.com Corporation, All Rights Reserved