html - css 如何添加這種邊框?

問題描述

如圖所示，要怎樣才能實現這種效果,給圖片四個角添加邊框

問題解答

絕對定位，四個正方形p，設置每個正方形的border

測試用二維碼:

我又來了，這幾天我一直在思考這個東西還能否進一步繼續簡化，我嘗試使用border-image來實現，然而發現實現上跟background沒太大區別，因此也就放棄了，如果有人還有更好的辦法，也可以提出來和大家一起分享。

今天，靈感一現，想起來了background-repeat的值不只有repeat啊，還有一個space。這不正是我們所需要的嗎？中間留出一個空白，發現竟然可以，而且代碼簡單了很多。以下是Demo:

Demo3

=================================================以下為原答案：DEMO1關于這個DEMO我感覺除了使用了很多復雜的思路沒有別的意義。所以緊接著我看到這個效果圖，又想到了使用背景層覆蓋來實現。

DEMO2具體是第一層(距離用戶最近的背景)設置為二維碼圖片

然后第二層第三層都是兩個白色窄矩形x,y方向重復。所以在第一層二維碼的背后我們會得到，

因為背景顏色層是在所有背景圖片的后面繪制的，所以我們設置顏色為 #15A6FF，會得到

也就是一層層的覆蓋得到最后的結果。一點小小的思路，僅供參考。

可以使用before和after偽類，二維碼區域使用藍色的邊框，然后二維碼區域的before和after一個使用上下白色邊框，另一個使用左右白色邊框，然后位置調整一下就可以失效你想要的效果

可以使用多重背景重疊的方式 要分別設置主背景和四條邊框背景的大小和位置

.block{ width: 200px; height: 200px; padding: 25px; background-image:linear-gradient(#58a,#58a) ,linear-gradient(to left,#0292f3 33.3%,transparent 0,transparent 66.6% , #0292f3 0) ,linear-gradient(#0292f3 33.3%,transparent 0,transparent 66.6% , #0292f3 0) ,linear-gradient(to right,#0292f3 33.3%,transparent 0,transparent 66.6% , #0292f3 0) ,linear-gradient(to bottom,#0292f3 33.3%,transparent 0,transparent 66.6% , #0292f3 0); background-clip: content-box,border-box,border-box,border-box,border-box; background-position: 0 0,0 0,100% 0,0 100%,0; background-size: 100%,100% 5px,5px 100%,100% 5px,5px 100%; background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat; }回答5：

使用絕對定位就ok

偽類 p：before 壓在下面四個p設置邊框。然后另外兩邊擋住 能想到的暫時就這個