div只有四個角有邊框怎么實現(xiàn)？

1、提供一個思路：

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

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

強行擼了個

css3 可以用 background 實現(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>

其實我覺得還不如用 border-image 實現(xiàn)來得簡單，不過 border-image 要切圖，

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

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

#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;
}
// 然后再來個下面的

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