花裏胡哨系列——個人博客裝飾代碼段

效果圖

前言

本文屬於花裏胡哨系列，提供思路，沒有Copy一下就能用的源碼
本人博客就實裝了這個點擊此處查看Demo

基本思路

• 審查元素找到代碼爲其添加::after固定其位置，其餘交給linear-gradient

# 代碼爲stylus 類似於css不影響理解
figure{
  .code pre{
    position relative
    overflow: hidden
    &::after{
      position absolute
      left 0
      top 0
      content: ""
      width .2rem
      height 100%
      background: #333;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, #4286f4,#373b44)
      background: linear-gradient(to bottom, #4286f4,#373b44)
    }
  }
  &:nth-child(5n+3) td.code pre::after{
      background: -webkit-linear-gradient(to bottom, #6dd5ed, #2193b0)  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #6dd5ed, #2193b0)
  }
  &:nth-child(5n+1) td.code pre::after{
      background: -webkit-linear-gradient(to bottom, #0575E6, #00F260)  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #0575E6, #00F260)
  }
}

子元素選擇讓頁面能更花哨點

其他

使用Hexo+Next主題做示例