创建一个图标

html部分

<div class="login_box">

            <!-- 图标盒子 -->

            <div class="avatar_box">

                <img src="../assets/logo.png">

            </div>

        </div>

css部分

.avatar_box{

        height: 130px;

        width: 130px;

        border: 1px solid gray;

        border-radius: 50%;

        padding: 10px;//增加内边距，把图片挤进去

        box-shadow: 0 0 10px #ddd;//给边框加阴影，向外扩散10px

        position: absolute;

        left: 50%;

        transform: translate(-50%,-50%);

        background-color: #fff;

    }

 

        img{

            // 因为图片本身是只有图像颜色画存在，其余地方都是空的,所以可以添加背景色，

            //这样中间留出来一个padding的距离

            width: 100%;

            height: 100%;

            // 图片本身（本身也是一个块元素）也设置成圆形

            border-radius: 50%;

            background-color: #eee;

        }