CSS 设置hr样式

1.基本颜色
hr {
border: 0;
height: 1px;
background-color: #333;
margin: 20px 0;
}

1. 改变高度
   hr {

    border: 0;
    height: 2px;
    background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 渐变色 */
    margin: 20px 0;
   

   }
   hr {

    border: 0;
    height: 3px; /* 高度为3px */
    background-color: #333;
    margin: 20px 0;
   

   }
   3.改变渐变颜色
   hr {

    border: 0;
    height: 2px;
    background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 渐变色 */
    margin: 20px 0;
   

   }
2. 使用图片作为背景
   hr {

    border: 0;
    height: 10px;
    background: url('https://geek-docs.com/images/geek-docs-logo.png') repeat-x; /* 使用图片作为背景 */
    margin: 20px 0;
   

   }
   5.虚线样式
   hr {

    border: 0;
    height: 1px;
    background: #333;
    border-top: 1px dashed #999; /* 虚线样式 */
    margin: 20px 0;
   

   }
   6.圆角样式

hr {
    border: 0;
    height: 1px;
    background: #333;
    border-top: 1px solid #999;
    border-radius: 5px; /* 圆角效果 */
    margin: 20px 0;
}

7.双线样式

---

hr {
border: 0;
height: 1px;
background: #333;
margin: 20px 0;
}
hr.double {
margin: 20px 0;
border-top: 3px double #999; / 双线样式 /
}
8.左右样式
hr {
border: 0;
height: 1px;
background: linear-gradient(to right, #333 50%, transparent 50%); / 斜线样式 /
margin: 20px 0;
}
9.点线样式
hr {
border: 0;
height: 1px;
background: #333;
border-top: 1px dotted #999; / 点线样式 /
margin: 20px 0;