body {
  margin: 40px;
}

// Base Divider class
.divider {
  display: flex;
  
  &:before,
  &:after {
    content: "";
    flex: 1;
  }
}

// Base line
.line {
  align-items: center;
  margin: 1em -1em;
  
  &:before,
  &:after {
    height: 1px;
    margin: 0 1em;
  }
}


  .one-line {
    &:before,
    &:after {
      background: black;
    }
  }

  .razor {
    &:before,
    &:after {
      box-shadow: 0 0.5px 0 black; // Chrome
      // border-bottom: 0.5px solid black; // Safari
    }
  }

  .double-razor {
    &:before,
    &:after {
      height: 3px;
      box-shadow: // Chrome
        0 -0.5px 0 black,
        0 0.5px 0 black;
      // border: solid black; // Safari
      border-width: 0;
    }
  }

    .glow {
    &:before,
    &:after {
      height: 6px;
      -webkit-filter: blur(5px);
      border-radius: 5px;
    }
    
    &:before {
      background: linear-gradient(to right, blue, hotpink);
    }
    
    &:after {
      background: linear-gradient(to left, blue, hotpink);
    }
  }

// Gradients
.gradient {
  align-items: stretch;
  margin: 1em 0;
  height: 2em;
  line-height: 2em;
  color: white;
  background: black;
  
  &:before {
    background: linear-gradient(to right, white, black);
  }
  
  &:after {
    background: linear-gradient(to left, white, black);
    }
}

// Ribbon thing
.donotcross {
  overflow: hidden;
  align-items: center;
  background: hsl(50, 100%, 50%);
  color: black;
  height: 2em;
  line-height: 2em;
    
  &:before,
  &:after {
    background: white;
    padding: 50px 0;
    height: 0;
    transform: rotate(45deg);
  }
}

上面 CSS 水平分割具体 css style：

<h2 class="divider line one-line" contenteditable>Simple 1px</h2>

<h2 class="divider line razor" contenteditable>Razor Line 0.5px</h2>

<h2 class="divider line double-razor" contenteditable>Double 0.5px</h2>

<h2 class="divider line glow" contenteditable>Light Saber</h2>

<h2 class="divider gradient" contenteditable>Gradient Heading</h2>

<h2 class="divider donotcross" contenteditable>Do Not Cross</h2>

CSS 炫酷的水平分隔线

Simple 1px

Razor Line 0.5px

Double 0.5px

Light Saber

Gradient Heading

Do Not Cross

上面 CSS 水平分割具体 css style：

上面 CSS 水平分割具体 css style：

CSS 水平分割线扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论