問(wèn)題描述

如圖所示，要怎樣才能實(shí)現(xiàn)這種效果,給圖片四個(gè)角添加邊框

問(wèn)題解答

絕對(duì)定位，四個(gè)正方形p，設(shè)置每個(gè)正方形的border

測(cè)試用二維碼:

我又來(lái)了，這幾天我一直在思考這個(gè)東西還能否進(jìn)一步繼續(xù)簡(jiǎn)化，我嘗試使用border-image來(lái)實(shí)現(xiàn)，然而發(fā)現(xiàn)實(shí)現(xiàn)上跟background沒(méi)太大區(qū)別，因此也就放棄了，如果有人還有更好的辦法，也可以提出來(lái)和大家一起分享。

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

Demo3

=================================================以下為原答案：DEMO1關(guān)于這個(gè)DEMO我感覺(jué)除了使用了很多復(fù)雜的思路沒(méi)有別的意義。所以緊接著我看到這個(gè)效果圖，又想到了使用背景層覆蓋來(lái)實(shí)現(xiàn)。

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

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

因?yàn)楸尘邦伾珜邮窃谒斜尘皥D片的后面繪制的，所以我們?cè)O(shè)置顏色為 #15A6FF，會(huì)得到

也就是一層層的覆蓋得到最后的結(jié)果。一點(diǎn)小小的思路，僅供參考。

可以使用before和after偽類，二維碼區(qū)域使用藍(lán)色的邊框，然后二維碼區(qū)域的before和after一個(gè)使用上下白色邊框，另一個(gè)使用左右白色邊框，然后位置調(diào)整一下就可以失效你想要的效果

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

.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：

使用絕對(duì)定位就ok

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