浏览器商城网站，会发现很多商城图片都是可以放大进行查看图片细节部分，采用放大镜缩小图标代替文字可以给予用户更好的体验效果。放大缩小图标其实可以直接使用css进行制作。(注意：最后一个步骤含有小图标所有代码，可以直接复制粘贴使用)
制作思路：
1.放大图标 = 1小圆 + 小圆个含有一个'+'号 + 一条斜杠 + ；
2.缩小图标 = 1小圆 + 小圆个含有一个'-'号 + 一条斜杠；
打开html软件开发工具，新建一个html代码页面，然后在这个html代码页面中创建一个
标签设置一个class类为 ：magnifier，然后在这个
标签中创建一个 标签。如图：标签下面创建一个<style>标签用于创建一个小圆，设置宽、高、边框以及圆属性。如图：</p><p>代码：</p><p><style></p><p> .magnifier{</p><p> width: 20px;height: 20px;</p><p> border-radius: 100%;</p><p> border: 2px solid currentcolor;</p><p> margin: 30px auto;</p><p> position: relative;</p><p> }</p><p> </p><p> </style></p><p>设置斜杠样式，使用css中的伪类after给magnifier类添加一个条斜线。如图：</p><p>css样式代码：</p><p>.magnifier::after{</p><p> content: "";</p><p> width: 13px;</p><p> height: 2px;</p><p> background-color: currentcolor;</p><p> position: absolute;</p><p> top: 80%;</p><p> left: 100%;</p><p> -webkit-transform: rotate(30deg);</p><p> -moz-transform: rotate(30deg);</p><p> -ms-transform: rotate(30deg);</p><p> -o-transform: rotate(30deg);</p><p> transform: rotate(30deg);</p><p> }</p><p>保存html代码文件，使用浏览器打开看一下页面是否显示为一个搜索按钮的小图标。如图：</p><p>创建缩小图标，在搜索图标里面添加一条垂直居中的小直线。使用css样式对<i>标签设置样式属性，创建一条小直线。如图：</p><p>css样式代码：</p><p>.magnifier i{</p><p> width: 10px;height: 2px;</p><p> background-color: currentcolor;</p><p> display: inline-block;</p><p> position: absolute;</p><p> top: 47%;</p><p> margin-left: 5px;</p><p> }</p><p>重新保存html代码页面，使用浏览器打开即可看到缩小图标效果。如图：</p><p>设置放大小图标，放大小图标 = 缩小小图标上的小圆圈里面多加一个竖线。在这里还是使用到了css伪类after设置一条竖线。如图：</p><p>css样式代码：</p><p>.magnifier i::after{</p><p> content: "";</p><p> width: 10px;height: 2px;</p><p> display: inline-block;</p><p> background-color: currentcolor;</p><p> position: absolute;</p><p> top: 0px;</p><p> -webkit-transform: rotate(90deg);</p><p> -moz-transform: rotate(90deg);</p><p> -ms-transform: rotate(90deg);</p><p> -o-transform: rotate(90deg);</p><p> transform: rotate(90deg);</p><p> }</p><p>保存html代码页面后使用浏览器打开即可看到放大小图标按钮。如图：</p><p>页面所有代码。可以直接复制所有代码到新建html页面，粘贴后即可看到页面效果。</p><p>所以代码：</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><meta charset="UTF-8"></p><p><title>放大镜
创建代码：
设置一个小圆,使用css样式对magnifier类设置一个小圆的样式。在