border width實現部落格園回覆效果

2022-01-15 02:12:14 字數 617 閱讀 8460

一、發現

二、實現

看到不會或者不清楚的,總想探個究竟,並把知識變成自己的。接下來就花點時間,實現這種效果。

2.1 以span 設定 border-width:20px; 為例,這樣相當於乙個 40*40 的正方形(上下(20*2)和左右(20*2)),然後平分成4份,怎麼平分呢,上下左右4個全等三角型就是了。既然這樣,我們就可以輕鬆實現以下效果了:

2.2 有了上面的做法,我們同樣可以再用乙個span,實現如下效果:

這樣,把淺藍色部分換成白色,就可以實現遮擋,再通過絕對定位,就可以實現我們想要的效果了。

2.3 完整**

好文,要攢

2.4 效果圖:

三、總結

乙個簡單的demo,以此小記。**不自己敲就不是你的,有空逛逛園子總會有收穫。

部落格登入實現許可權攔截

handlerinterceptor 處理器 public inte ce handlerinterceptorhandlerinterceptor的三種方法,屬於方法 先講怎麼實現吧 首先 建立乙個配置類,這裡要用到 configuration這個註解,configuration public c...

部落格專案 分頁功能實現

伺服器路由 userpage.js 將page 客戶端以get方式傳遞的當前頁數 和total 伺服器從資料庫獲取並計算出的總頁數 資料引入模板 引入使用者模板 const require model user module.exports async req,res total存放使用者總頁數 l...

open live writer實現多部落格同步傳送

本文出自hansion的部落格 很多人都有多個部落格平台同時使用,如csdn 開源中國等,但是在其中乙個平台上寫完部落格,想同樣發表到其他平台上,這需要我們複製貼上或者部落格搬家,這往往是乙個枯燥乏味的過程。那麼,有沒有辦法能讓我們一次發表就直接發表到各個平台上呢?通過metaweblog api ...