左邊豎條的實現方法

下面這個圖形，只使用一個標籤，能夠有多少種實現方式：

假設咱們的單標籤是一個  div :

1	< div > div>

定義以下通用CSS：

1 2 3 4 5 6

div{      position : relative ;      width : 200px ;      height : 60px ;      background : #ddd ; }

 

方法一：border

這個應該是最最最容易想到的了

1 2 3

div{      border-left : 5px  solid  deeppink; }

 

方法二：使用僞元素

一個標籤，算上 before 與 after 僞元素，其實算是有三個標籤，這也是不少單標籤做圖的基礎，本題中，使用僞元素能夠輕易完成。

1 2 3 4 5 6 7 8 9

div::after{      content : "" ;      width : 5px ;      height : 60px ;      position : absolute ;      top : 0 ;      left : 0 ;      background :deeppink; }

 

方法三：外 box-shadow

盒陰影 box-shadow 大部分人都只是用了生成陰影，其實陰影能夠有多重陰影，陰影不能夠不虛化，這就須要去了解一下 box-shaodw 的每個參數具體做用。使用 box-shaodw 解題

1 2 3

div{      box-shadow: -5px  0px  0  0  deeppink; }

 

方法四：內 box-shadow

盒陰影還有一個參數 inset ，用於設置內陰影，也能夠完成：

1 2 3

div{      box-shadow: inset  5px  0px  0  0  deeppink; }

 

方法五：drop-shadow

drop-shadow 是 CSS3 新增濾鏡 filter 中的其中一個濾鏡，也能夠生成陰影，不過它的數值參數個數只有 3 個，比之 box-shadow 少一個。

1 2 3

div{      filter:drop-shadow( -5px  0  0  deeppink); }

 

方法六：漸變 linearGradient

靈活使用 CSS3 的漸變能夠完成大量想不到的圖形，CSS3 的漸變分爲線性漸變和徑向漸變，本題使用線性漸變，能夠輕易解題：

1 2 3

div{      background-image :linear-gradient( 90 deg, deeppink  0px , deeppink  5px ,  transparent  5px ); }

 

方法七：輪廓 outline

這個用的比較少，outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。這個方法算是下下之選。

1 2 3 4 5 6 7 8 9 10 11 12 13

div{      height : 50px ;      outline : 5px  solid  deeppink; } div{      position : absolute ;      content : "" ;      top : -5px ;      bottom : -5px ;      right : -5px ;      left : 0 ;      background : #ddd ; }

 

方法8、滾動條

這個方法由 小火柴的藍色理想 提供，經過改變滾動條樣式實現：

1 2 3 4 5 6 7 8 9

div{      width : 205px ;      background :deeppink;      overflow-y: scroll ; } div::-webkit-scrollbar{      width :  200px ;      background-color : #ddd ; }

拋開實用性，僅僅是模擬出這個樣式的話，這個方法真的讓人眼前一亮。

轉載請註明：前端錄»左邊豎條的實現方法