<h1>https://www.w3cplus.com</h1>
<p>W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文;其文章范围广泛,主要以<strong>CSS3</strong>、<strong>HTML5</strong>、<strong>Sass</strong>、<strong>Mobile</strong>和各类DEMO为主。</p>
$square-color: #f4f4f4;
$square-size: 8px;

* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  padding: 2vw;
  line-height: 2;
  background-image:
    linear-gradient(45deg, $square-color 25%, transparent 25%, transparent 75%, $square-color 75%, $square-color), 
    linear-gradient(45deg, $square-color 25%, transparent 25%, transparent 75%, $square-color 75%, $square-color);
  background-position: 0 0, $square-size $square-size;
  background-size: ($square-size * 2) ($square-size * 2);
}

h1 {
  font-size: 3rem;
  color: #f36;
  border-bottom: 3px solid green;
}


strong{
  border-bottom: 1px solid black;
  
  &:nth-child(2){
    border-bottom: 2px dotted orange;
  }
  &:nth-child(3){
    border-bottom: 3px double red;
  }
  &:nth-child(4){
    border-bottom: 5px dashed lime;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.