HTML_CSS

CSS 打造19种 hr 的样式与颜色

舞空

2023-02-24

hr标签用于水平线和文本的内容分隔，它被定义为HTML中的主题分隔符，并且不需要任何结束标签。

设置hr标签的颜色

    hr{
        height: 1px;
        background-color: #ccc;
        border: none;
    }

用HTML设置19个实例HR样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hr样式表 - 天宁日记</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<hr class="hr-1">
<hr class="hr-2">
<hr class="hr-3">
<hr class="hr-4">
<hr class="hr-5">
<hr class="hr-6">
<hr class="hr-7">
<hr class="hr-8">
<hr class="hr-9">
<hr class="hr-10">
<hr class="hr-11">
<hr class="hr-12">
<hr class="hr-13">
<hr class="hr-14">
<hr class="hr-15">
<hr class="hr-16">
<hr class="hr-17">
<hr class="hr-18">
<hr class="hr-19">
</body>
</html>

CSS 样式

hr {
  background-color: #fff;
  padding: 0;
  margin: 80px;
}

hr.hr-1 {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.hr-2 {
  border: 0;
  border-bottom: 2px dashed #eee;
  background: #999;
}

hr.hr-3 {
  border: 0;
  height: 0;
  border-top: 1px solid #8c8c8c;
}

hr.hr-4 {
  padding: 0;
  border: none;
  border-top: medium double #8c8c8c;
  color: #8c8c8c;
  text-align: center;
}

hr.hr-4:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: #fff;
}

hr.hr-5 {
  border: 0;
  border-top: 3px double #8c8c8c;
}

hr.hr-6 {
  border: 0;
  border-top: 2px dotted #8c8c8c;
}

hr.line-7 {
  border: 0;
  background-color: #fff;
  border-top: 1px dashed #8c8c8c;
}

hr.hr-8 {
  border: 0;
  background-color: #fff;
  border-top: 2px dotted #8c8c8c;
}

hr.hr-9 {
  border: 0;
  border-top: 1px solid #8c8c8c;
  border-bottom: 1px solid #fff;
}

hr.hr-10 {
  border: 0;
  border-top: 1px solid #8c8c8c;
  border-bottom: 1px solid #fff;
}

hr.hr-10:after {
  content: '';
  display: block;
  margin-top: 2px;
  border-top: 1px solid #8c8c8c;
  border-bottom: 1px solid #fff;
}

hr.hr-11 {
  border: 0;
  border-top: 1px dashed #8c8c8c;
  border-bottom: 1px dashed #fff;
}

hr.hr-12 {
  border: 0;
  border-top: 1px dotted #8c8c8c;
  border-bottom: 1px dotted #fff;
}

hr.hr-13 {
  height: 10px;
  border: 0;
  box-shadow: 0 10px 10px -10px #8c8c8c inset;
}

hr.hr-14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
}

hr.hr-15 {
  border: 0;
  border-top: 4px double #8c8c8c;
  text-align: center;
}

hr.hr-15:after {
  content: '\2665';
  display: inline-block;
  position: relative;
  top: -15px;
  padding: 0 10px;
  background: #fff;
  color: #8c8c8c;
  font-size: 18px;
}

hr.hr-16 {
  border: 0;
  border-top: 1px dashed #8c8c8c;
  text-align: center;
}

hr.hr-16:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -13px;
  padding: 0 3px;
  background: #fff;
  color: #8c8c8c;
  font-size: 18px;
}

hr.hr-17 {
  border: 0;
  height: 0;
  box-shadow: 0 0 10px 1px black;
}

hr.hr-17:after {
  content: "\00a0";
}

hr.hr-18 {
  background-color: #fff;
  height: 30px;
  border: 1px solid #8c8c8c;
  border-radius: 20px;
}

hr.hr-18:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border: 0 solid #8c8c8c;
  border-bottom-width: 1px;
  border-radius: 20px;
}

.hr-19 {
  border: none;
  height: 10px;
  background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;
  background-color: #fff;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 10px;
}

在线预览

天宁日记（axzb.com）原创文章，转载需注明出处。