花里胡哨系列——个人博客装饰代码段

效果图

前言

本文属于花里胡哨系列，提供思路，没有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主题做示例