使用 css 实现模块边框效果

.card > span:nth-child(1), .card2 > span:nth-child(1) {
    position: absolute;
    left: -2px;
    top: -2px;
    padding: 11px;
    border-style: solid;
    border-color: #4AC3FF;
    border-width: 3px 0 0 3px;
}

.card > span:nth-child(2), .card2 > span:nth-child(2) {
    position: absolute;
    right: -2px;
    top: -2px;
    padding: 11px;
    border-style: solid;
    border-color: #4AC3FF;
    border-width: 3px 3px 0 0;
}

.card > span:nth-child(3), .card2 > span:nth-child(3) {
    position: absolute;
    right: -2px;
    bottom: -2px;
    padding: 11px;
    border-style: solid;
    border-color: #4AC3FF;
    border-width: 0 3px 3px 0;
}

.card > span:nth-child(4), .card2 > span:nth-child(4) {
    position: absolute;
    left: -2px;
    bottom: -2px;
    padding: 11px;
    border-style: solid;
    border-color: #4AC3FF;
    border-width: 0 0 3px 3px;
}



.box {
    width: 25%;
}

.box2 {
    margin-left: 16px;
}

.card2:first-child {
    margin-right: 16px;
}

.card2 {
    width: 50%;
    border: solid 1px #4AC3FF;
    height: 420px;
    background-color: rgba(74, 195, 255, 0.14);
    position: relative;
}

<div class="module-2-border">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
		            <div style="padding-top: 5px;padding-left: 10px;height: calc(100% - 5px);">
		                <!--头部标题 选择栏-->
		                <div style="height: 15%;width: 100%;">
		                    <div style="width: 100%;display: flex;justify-content: space-between;">
		                        <!--标题-->
		                        <div class="modal-2-hand-title">社区(村)“三零”创建情况</div>
		                        <!--选择器-->
								<div class="layui-tab layui-tab-brief" style="margin-right: 5%">
									<ul class="layui-tab-title myLeft">
										<li id="cjl_module_2" class="layui-this">创建率</li>
										<li id="aj_module_2">案件</li>
										<li id="sf_module_2">上访</li>
										<li id="sg_module_2">事故</li>
									</ul>
								</div>
<!--		                        <div id="modal-1-select-body" class="select-body-css">-->
<!--									<div class="select-item-1">创建率</div>-->
<!--									<div class="select-item-1">案件</div>-->
<!--									<div class="select-item-1">上访</div>-->
<!--									<div class="select-item-2">事故</div>-->
<!--								</div>-->
		                    </div>
		                </div>
		                <!--ecahrts-->
		                <div id="module_2" style="height: 80%;width: 100%;"></div>
		            </div>
		        </div>