๐ท๏ธ<hr>
๐ฐ HTML โฉ Elements โฉ <hr>
(Horizontal Rule)
represents a thematic break between paragraph-level elements.
ๆณจๆ๏ผ <hr> ้ ่จญๅชๆ 1px ็ border๏ผๆฒๆ content heightโ๏ธ
/* default styles */
hr {
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
/* โญ๏ธ ้ ่จญๅชๆ border, ๆณจๆ๏ผcontent height = 0โ๏ธ */
border-style: inset;
border-width: 1px;
}
replit โฉ style <hr>
:root {
--x: 2px; /* shadow offset */
}
html {
background-color: tomato;
}
body {
background-color: #ccc;
color: #333;
padding: 1em;
}
hr.gradient {
border: 0;
height: 2px;
background-image:
linear-gradient(to right, goldenrod, red, yellow);
border-radius: 2px;
}
hr.transparent {
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.dashed {
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
hr.solid {
/* โญ๏ธ ๅฆๆ่ฆไฝฟ็จ content-box ็่ๆฏ่ฒ */
background-color: #999;
height: 8px; /* โญ๏ธ ่ฆ่จญๅฎ้ซๅบฆโ๏ธ */
border-style: none; /* โญ๏ธ ้้ border */
border-radius: 4px;
}
hr.dotted {
/* โญ๏ธ ๅช้ๆพ border-top */
border-style: dotted none none;
border-width: 8px;
border-color: #999;
width: 100px;
}
hr.thin {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
hr.height {
height: 12px;
}
hr.left {
margin-right: 50%;
}
hr.right {
margin-left: 50%;
}
hr.border0 {
border: 0;
}
hr.bg {
background-color: #eee;
}
hr.shadow {
box-shadow: var(--x) var(--x) var(--x) 0px #888888 inset;
}
Last updated