前端小练——CSS如何做十字图样

#box{
            position:absolute;
            /* 定位改变位置 */
            top:0;
            left:10;
            right:0;
            bottom:30;
            width:40px;
            height:30px;
            /* 设置宽高 */
            margin:auto;
            background-color: red;
            border-radius: 0 5px;
            /* 设置边框圆角 */
        }
        #box::before{
            content:"";
            /* 设置一个虚拟的，不占空间的块 */
            position:absolute;
            left:50%;
            top:0;
            /* 设置位置为box的竖线 */
            width:2px;
            height:45%;
            /* 设置宽高 */
            margin-left:-1px;
            margin-top: 8px;
            /* 调整位置 */
            background-color:white;
        }
        #box::after{
            content:"";
              /* 设置一个虚拟的，不占空间的块 */
            position:absolute;
            left:0;
            top:40%;
             /* 设置位置为box的横线 */
            width:33%;
            height:2px;
            /* 设置宽高 */
            margin-top:2px;
            margin-left:13px;
             /* 调整位置 */
            background-color:white;
        }

这是css部分代码

<div id="box"></div>

这是html部分代码

 右上角就是完成图

就是利用：after和：before来完成