商业合作
免费在我们的网站上发布一篇文章
公众号承接推广任务
联系我们 微信号码: 18003606519
CSS打造hr样式3IA天宁日记|网页模板_网页设计_网站建设
3IA天宁日记|网页模板_网页设计_网站建设
hr标签用于水平线和文本的内容分隔,它被定义为HTML中的主题分隔符,并且不需要任何结束标签。3IA天宁日记|网页模板_网页设计_网站建设
3IA天宁日记|网页模板_网页设计_网站建设
设置hr标签的颜色3IA天宁日记|网页模板_网页设计_网站建设
 
    hr{
        height: 1px;
        background-color: #ccc;
        border: none;
    }
3IA天宁日记|网页模板_网页设计_网站建设
3IA天宁日记|网页模板_网页设计_网站建设
用HTML设置19个实例HR样式:3IA天宁日记|网页模板_网页设计_网站建设
 
<!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>
3IA天宁日记|网页模板_网页设计_网站建设
CSS 样式3IA天宁日记|网页模板_网页设计_网站建设
 
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;
}
3IA天宁日记|网页模板_网页设计_网站建设
 
CSS美化上传表单和按钮
集合180种免费的背景线性渐变