前幾天遇到了上班的第乙個難題，專案想要實現這樣的效果：
實際效果比視覺圖上下多了兩截。。。
但是，聰明如我怎麼可以在我的第乙個頁面上屈服呢！於是在光明正大地看了其他**類似效果的原始碼之後，我也get到了這個技能！
原來這裡是用到障眼法，分別畫出兩個細成一條線的div，分別為.border-first和.border-last。（這裡需要了解絕對定位和相對定位）
然後調整這兩條線（兩個div）到合適的位置，這裡為了方便觀察，線條設定為紅色，效果是這樣的：
最後，只要將線條設定為白色就大功告成咯~
如果覺得黑色圈圈很醜也可以用替換，再改改文字樣式就perfect了~
**演示在這裡：
css相對定位與絕對定位
逆戰班通常情況下，我們用css定位來解決容器疊加排列的 問題，而用浮動解決左右排列的問題。position屬性的值主要有static，relative，absolute，fixed和sticky這幾種，position屬性的預設值為static，也就是沒有定位，元素在正常的文件流中，這時候給元素加偏...
CSS相對定位絕對定位
absolute 絕對定位 一共有四個屬性值 top right bottom left position absolute top 20px 絕對定位的參考點就是他的父級。同理，如果父級沒有定位屬性，就查詢他的爺爺級.relative 相對定位相對定位與絕對定位結合使用 通常情況下，在對元素設定絕...
詳解CSS絕對定位與相對定位
引伸閱讀 解讀absolute與relative position relative absolute無法衝破的等級 定位一直是web標準應用中的難點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。定位的定義 在css中關於...