css如何给div加上四角边框

先看效果图
css如何给div加上四角边框
HTML代码(注:view是微信小程序中的div,如果是html或者vue换成div即可):

<view style="width:272rpx;height:216rpx;position:relative;margin: 10px 0px 0 5px;">
   <view class="a"></view>
   <view class="b"></view>
   <view class="c"></view>
   <view class="d"></view>
</view>

CSS代码:

.a {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 2px solid #EBEBEB;
    border-top: 2px solid #EBEBEB;
}

.b {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    right: 0;
    border-right: 2px solid #EBEBEB;
    border-top: 2px solid #EBEBEB;
}

.c {
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #EBEBEB;
    border-left: 2px solid #EBEBEB;
}

.d {
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-right: 2px solid #EBEBEB;
    border-bottom: 2px solid #EBEBEB;
}

即可实现效果。

上一篇:基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现(3)会员首页 班级信息、宿舍信息、课程排班表


下一篇:CSS3教程4——页面布局