1、提供一個(gè)思路：

• 寫一個(gè) div 擁有 border: 3px solid blue;
• div 中寫四個(gè) div 分別定位上下左右遮擋中間 border 部分

2、或者用其他人的思路，那樣子需要擁有兩個(gè)元素來(lái)為其分別設(shè)置 ::before 與 ::after

強(qiáng)行擼了個(gè)

css3 可以用 background 實(shí)現(xiàn)，如下：

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}

<div class="rect"></div>

其實(shí)我覺得還不如用 border-image 實(shí)現(xiàn)來(lái)得簡(jiǎn)單，不過(guò) border-image 要切圖，

我之前寫過(guò)這個(gè)需求，用jq寫的，給需要裝飾的div，添加四個(gè)邊角，其實(shí)就是四個(gè)div。邊角的寬度，高度，顏色，數(shù)量（有可能只需要上下的或者左右的），都傳參添加的，沒找著以前的代碼了。你可以自己擼一個(gè)，不難。大概就是這個(gè)樣子了。

用背景圖吧。偽元素做出來(lái)的不能寫內(nèi)容，而且你的示例里也不是純色背景，不適用。
或者你可以強(qiáng)行把兩個(gè)懟一齊，但是有無(wú)用元素也不太好。

#border{
  width: 100px;
  height: 100px;
  position: relative;
  margin: 100px auto 0;
}
#border:after{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
#border:before{
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-right: 1px solid black;
  border-top: 1px solid black;
}
// 然后再來(lái)個(gè)下面的

額，不知道我這個(gè)想法有沒有人接受，就是用兩個(gè)div，上面一個(gè)旋轉(zhuǎn)45度，覆蓋四邊