Стили <hr/>

---

Нет комментариев.

---

Короткая линия


<hr width=100 align="left">

---

Двойная линия

<hr class="hr-double">

<style>
.hr-double {
margin: 20px 0;
padding: 0;
height: 1px;
border: none;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
</style>



---

Многострочная линия

<hr class="hr-multiline">

<style>
.hr-multiline {
margin: 20px 0;
padding: 0;
height: 20px;
border: none;
color: #333;
background-image: linear-gradient(currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%);
background-size: 100% 3px;
}
</style>



---

Градиентная чёрная

<hr class="style-one">

<style>
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
</style>



---

Пунктирная двойная линия рамкой

<hr class="style-seven">

<style>
hr.style-seven {
height:8px;
border: 2px dashed #999;
}
</style>



---

Тень

<hr class="style-volna2">

<style>
hr.style-volna2 {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
</style>



---

Размытие

<hr class="style-volna3">

<style>
hr.style-volna3 {
border: 0;
height: 0; /* Firefox... */
box-shadow: 0 0 10px 1px black;
}
hr.style-five:after {
content: "\00a0";
}
</style>



---

SVG c анимацией.

<hr class="hr1">

<style>
.hr1 {
border: none;
margin: 30px 0;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='rgb(51, 122, 183)' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-2,10,-2 s 5,2,10,2 c 5,0,5,-2,10,-2 s 5,2,10,2'/%3E%3C/svg%3E");
background-position: 0 100%;
background-repeat: repeat-x;
padding-bottom: 4px;
background-size: auto 4px;
}
</style>



---

Пример с бегущей линией.

<hr class="hr2">

<style>
.hr2 {
margin: 30px 0;
height: 4px;
background: #BFE2FF;
position: relative;
overflow: hidden;
border: none;
}
.hr2:after {
content: "";
height: 4px;
background: #337AB7;
position: absolute;
width: 20%;
top: 0;
animation: anim-hr 5s linear infinite;
}
@keyframes anim-hr {
0% {
left: -20%;
}
100% {
left: 100%;
}
}
</style>



---

Линейный градиент без переходов.

<hr class="hr3">

<style>
.hr3 {
border: 0;
height: 4px;
margin: 30px 0;
background-image: linear-gradient(to right, #BFE2FF 50%, #337AB7 50%, #337AB7 60%, #ff9100 60%, #ff9100 70%, #05b5e6 70%, #05b5e6 80%, #b448b8 80%, #b448b8 90%, #BFE2FF 90%, #BFE2FF 100%);
}
</style>



---

Вертикальный градиент.

<hr class="hr-vertical-gradient">

<style>
.hr-vertical-gradient {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
background: linear-gradient(180deg, orange, blue);
</style>



---

Пунктир градиентный.

<hr class="hr-dashed-gradient">

<style>
.hr-dashed-gradient {
margin: 20px 0;
padding: 0;
height: 2px;
border: none;
background: linear-gradient(to right, transparent 50%, #fff 50%),
linear-gradient(to right, blue, red);
background-size: 16px 2px, 100% 2px;
} </style>



---

Верхняя скоба.

<hr class="hr-up">

<style>
.hr-up {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
} </style>



---

Нижняя скоба.

<hr class="hr-down">

<style>
.hr-down {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
} </style>



---

Горизонтальный градиент.

<hr class="hr-horizontal-gradient">

<style>
.hr-horizontal-gradient {
margin: 20px 0;
padding: 0;
height: 6px;
border: none;
background: linear-gradient(45deg, #333, #ddd);
} </style>



---

Линия «Полка».

<hr class="hr-shelf">

<style>
.hr-shelf {
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid #1f1209;
box-shadow: 0 20px 20px -20px #333;
width: 95%;
} </style>



---