在开发当中，大多数人在写移动端的小图都是直接用 阿里的iconfont 引入；比如手机上的WiFi图标，电量，信号格等，那么怎么去实现呢？我们拿一个 WiFi 图标为例，只需要用到css里面的几个常用属性就可实现。

属性：

1.定位

1.1 相对定位

相对定位是相对其初始位置进行偏移定位的，语法就是给父元素一个： position：relative；

开启相对定位的特点：

不会影响到其他元素的位置
不会脱离文档流
是相对于自己原来的位置来移动的
定位元素的显示比普通元素要高

相对定位的使用需要配合方位每次： left top right bottom 然后再给方位名词一个偏移尺寸的大小；

相对定位的元素，也可以通过margin调整位置，但是定位就可以达到调整位置的目的，而且用使用margin来调整元素的定位，会影响其他元素的位置，所以一般不推荐和margin同时使用。

也不推荐同时使用 float：left浮动

1.2 绝对定位

绝对定位是以父元素的左上角原点为定位基准点，absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。

绝对定位的特点：

脱离文档流，不再占有原来的位置
以带有定位元素的祖先元素为参考，如果父级有，则以父元素为准，如果父元素没有，则往外找祖先元素，如果一直找不到，则以浏览器视口为准。
通常子元素如果使用了绝对定位，则我们会将父元素设置为相对定位，尽可能减少。绝对定位脱离标准流之后，没有受到约束而导致的不好的影响。所以，有一个口诀叫做： 子绝父相
如果绝对定位和浮动一起使用，则浮动会失效，以绝对定位为准。可以使用margin，但是不推荐这样使用。
元素设置了定位之后，则可以设置尺寸。

2. 边框圆角

border-radius 可以将盒子变为圆角，通常直接使用border-radius就可以同时设置4个边框的圆角，当border-radius的值是宽高的50%的时候，就会呈现一个正圆形。

单独设置每一个边的圆角

使用fancy-border-radius网站就可以设计出很好看的图形。

单独给左上角设置圆角，注意，先写top，再写left

border-top-left-radius: 50px 100px;

单独给右上角设置圆角

border-top-right-radius: 50px;

单独给左下角设置

border-bottom-left-radius: 50px;

单独给右下角设置

border-bottom-right-radius: 50px;

前面4个值分别对应左上角、右上角、右下角、左下角的x坐标；后面4个值分别对应左上角、右上角、右下角、左下角的y坐标。

border-radius: 30px 40px 50px 60px / 30px 40px 50px 60px;

3. transparent

transparent 主要用于控制盒子内部的文本的透明度，比如将盒子内部的内容设置为透明颜色，不会修改盒子自身的透明度。

HTML部分

我们在一个盒子里面放四个 div

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

CSS部分

设置四个盒子的宽高，然后根据它们所在的位置去调整大小，再使用 border-radius调整为圆，给边框设置一个颜色，留住 top 部分，其余三个设成透明度一个雏形就出来了，最后再根据定位再调整位置即可完成。(完整代码)

        .container {
            position:relative
        }
        .box1 {
            position: absolute;
            left:0;
            top:0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 14px solid black;
            border-bottom-color:transparent;
            border-left-color:transparent;
            border-right-color:transparent
        }

        .box2 {
            position: absolute;
            left:18px;
            top:28px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 9px solid black;
            border-bottom-color:transparent;
            border-left-color:transparent;
            border-right-color:transparent
        }

        .box3 {
            position: absolute;
            left:35px;
            top:48px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: black;
        }
    </style>

运行结果

纯css写WiFi图标居然这么简单？

1.定位

1.1 相对定位

1.2 绝对定位

2. 边框圆角

3. transparent