邊框四周加角樣式

要完成上面一個邊框四周加上角樣式。

.CSS部分

border_leftTop {
    position: absolute;
    border-top-width: 0.105rem;
    border-top-color: #00dbed;
    border-top-style: solid;
    border-left-width: 0.105rem;
    border-left-color: #00dbed;
    border-left-style: solid;
    height: 0.55rem;
    width: 0.55rem;
    background: rgba(0,0,0,0);
    top: 0rem;
    left: 0rem;
}
.border_rightTop {
    position: absolute;
    border-top-width: 0.105rem;
    border-top-color: #00dbed;
    border-top-style: solid;
    border-right-width: 0.105rem;
    border-right-color: #00dbed;
    border-right-style: solid;
    height: 0.55rem;
    width: 0.55rem;
    background: rgba(0,0,0,0);
    top: 0rem;
    right:0rem;
}
.border_leftBottom {
    position: absolute;
    border-bottom-width: 0.105rem;
    border-bottom-color: #00dbed;
    border-bottom-style: solid;
    border-left-width: 0.105rem;
    border-left-color: #00dbed;
    border-left-style: solid;
    height: 0.55rem;
    width: 0.55rem;
    background: rgba(0,0,0,0);
    top: 60%;
    left: 0rem;
}
.border_rightBottom {
    position: absolute;
    border-bottom-width: 0.105rem;
    border-bottom-color: #00dbed;
    border-bottom-style: solid;
    border-right-width: 0.105rem;
    border-right-color: #00dbed;
    border-right-style: solid;
    height: 0.55rem;
    width: 0.55rem;
    background: rgba(0,0,0,0);
    top: 60%;
    right: 0rem;
}

HTML部分：

<li class="a1">
            <div class="border_leftTop"></div>
            <div class="border_rightTop"></div>
            <div class="border_leftBottom"></div>
            <div class="border_rightBottom"></div>
                <router-link :to="{path:'/networkSafes/overall'}" active-class='on'>綜合態勢</router-link>
            </li>

記得要再外面一層加上position:relative|absolute等的位置定位。這樣角的定位纔會基於父層的定位顯示。高度那些可以自己調。