分隔线集合

你的名字 2022-08-30 08:43 159阅读 0赞

\#\# 基础分隔线

一条黑色实线

\`\`\` html

<hr />

\`\`\`

\#\#\# 点线

\`\`\` css

/\* 点线 \*/

.hr-dotted \{

border: 0;

border-top: 2px dotted \#000;

\`\`\`

\#\#\# 虚线

\`\`\` css

/\* 虚线 \*/

.hr-dashed \{

border: 0;

border-top: 2px dashed \#000;

\`\`\`

\#\#\# 双实线

\`\`\` css

.hr-double \{

border: 0;

border-top: 3px double \#000;

\`\`\`

\#\#\# 疏密可控虚线

\`\`\` css

.hr-dashed-fixed \{

border: 0;

padding-top: 1px;

background: repeating-linear-gradient(to right, \#000 0px, \#000 4px, transparent 0px, transparent 10px);

\`\`\`

使用CSS变量将虚线实线比例做成可配置

\`\`\` html

<hr class="hr-dashed-fixed" style="--dashed-filled: 6px; --dashed-open: 5px;">

\`\`\`

\`\`\` css

.hr-dashed-fixed \{

border: 0;

padding-top: 1px;

/\* for IE浏览器 \*/

background: repeating-linear-gradient(to right, \#a2a9b6 0px, \#a2a9b6 4px, transparent 0px, transparent 10px);

/\* for 现代浏览器 \*/

background: repeating-linear-gradient(to right, \#a2a9b6 0 var(--dashed-filled, 4px), transparent 0 calc(var(--dashed-filled, 4px) + var(--dashed-open, 6px)));

\`\`\`

\*\*CSS变量完整语法\*\*：\`var( \[, \]? )\`，用中文表示就是：\`var( <自定义属性名> \[, <默认值 \]? )\`

意思就是：如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。

ps：如果变量值不合法，默认值代替

\#\#\# 斜纹线

\`\`\` css

.hr-twill \{

border: 0;

padding: 3px;

background: repeating-linear-gradient(135deg, \#a2a9b6 0px, \#a2a9b6 1px, transparent 1px, transparent 6px);

\`\`\`

使用遮罩让斜纹变成彩色

\`\`\` css

/\* 现代浏览器only \*/

.hr-twill-colorful \{

border: 0;

padding: 3px;

background: linear-gradient(135deg, red, orange,green, blue, purple);

--mask-image: repeating-linear-gradient(135deg, \#000 0px, \#000 1px, transparent 1px, transparent 6px);

-webkit-mask-image: var(--mask-image);

mask-image: var(--mask-image);

\`\`\`

效果如下：

\#\#\# 波浪线

\`\`\` css

.hr-wavy \{

border: 0;

color: \#000;

height: .5em;

white-space: nowrap;

letter-spacing: 100vw;

padding-top: .5em;

.hr-wavy::before \{

content: "\\2000\\2000";

/\* IE浏览器实线代替 \*/

text-decoration: overline;

/\* 现代浏览器 \*/

text-decoration: overline wavy;

\`\`\`

\#\# 带文字的分隔线

\#\#\# 两端实现

\`\`\` html

<hr class="hr-solid-content" data-content="分隔线">

\`\`\`

\`\`\` css

.hr-solid-content \{

color: \#000;

border: 0;

font-size: 12px;

padding: 1em 0;

position: relative;

.hr-solid-content::before \{

content: attr(data-content);

position: absolute;

padding: 0 1ch;

line-height: 1px;

border: solid \#000;

border-width: 0 99vw;

width: fit-content;

/\* for 不支持fit-content浏览器 \*/

white-space: nowrap;

left: 50%;

transform: translateX(-50%);

\`\`\`

\#\#\# 两端虚线

在两端实线基础上加渐变

\`\`\` html

<hr class="hr-solid-content hr-solid-content" data-content="分隔线">

\`\`\`

\`\`\` CSS

.hr-dashed-content::before \{

border-image: repeating-linear-gradient(90deg, \#000, \#000 1px, transparent 1px, transparent 2px) 0 85% 0 repeat;

\`\`\`

\#\#\# 两端淡出

在两端实线基础上加遮罩

\`\`\` html

<hr class="hr-solid-content hr-fade-content" data-content="分隔线">

\`\`\`

\`\`\` css

.hr-fade-content \{

-webkit-mask-image: linear-gradient(to right, transparent, black, transparent);

mask-image: linear-gradient(to right, transparent, black, transparent);

\`\`\`

分隔线集合

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 PostgreSQL查询集合结果用逗号分隔返回字符串

相关 Word 去除脚注分隔线前的空格

相关分隔线集合

相关分隔线.集

相关 bootstrap 水平分隔线

相关 postgresql 查询集合结果用逗号分隔返回字符串处理

相关 RecyclerView系列之添加分隔线

相关 HTML_05 —— 分隔线

相关 easyui toolbar分隔线

相关 C# Winform界面中的分隔线问题