html - css 如何添加這種邊框?
問題描述
如圖所示,要怎樣才能實現這種效果,給圖片四個角添加邊框
問題解答
回答1:絕對定位,四個正方形p,設置每個正方形的border
回答2:測試用二維碼:
我又來了,這幾天我一直在思考這個東西還能否進一步繼續簡化,我嘗試使用border-image來實現,然而發現實現上跟background沒太大區別,因此也就放棄了,如果有人還有更好的辦法,也可以提出來和大家一起分享。
今天,靈感一現,想起來了background-repeat的值不只有repeat啊,還有一個space。這不正是我們所需要的嗎?中間留出一個空白,發現竟然可以,而且代碼簡單了很多。以下是Demo:
Demo3
=================================================以下為原答案:DEMO1關于這個DEMO我感覺除了使用了很多復雜的思路沒有別的意義。所以緊接著我看到這個效果圖,又想到了使用背景層覆蓋來實現。
DEMO2具體是第一層(距離用戶最近的背景)設置為二維碼圖片
然后第二層第三層都是兩個白色窄矩形x,y方向重復。所以在第一層二維碼的背后我們會得到,
因為背景顏色層是在所有背景圖片的后面繪制的,所以我們設置顏色為 #15A6FF,會得到
也就是一層層的覆蓋得到最后的結果。一點小小的思路,僅供參考。
回答3:可以使用before和after偽類,二維碼區域使用藍色的邊框,然后二維碼區域的before和after一個使用上下白色邊框,另一個使用左右白色邊框,然后位置調整一下就可以失效你想要的效果
回答4:可以使用多重背景重疊的方式 要分別設置主背景和四條邊框背景的大小和位置
.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
回答6:偽類 p:before 壓在下面四個p設置邊框。然后另外兩邊擋住 能想到的暫時就這個
相關文章:
1. html5 - ElementUI table中el-table-column怎么設置百分比顯示。2. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?3. 對mysql某個字段監控的功能4. css3 - less或者scss 顏色計算的知識應該怎么學?或者在哪里學?5. 注冊賬戶文字不能左右分離6. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能7. css - 網頁div區塊 像蘋果一樣可左右滑動 手機與電腦8. javascript - 數組的過濾和渲染9. html - vue項目中用到了elementUI問題10. JavaScript事件
