分隔線是寫文章時很常用到的一種分隔法,某些部落格會在後台文章編輯處放入分隔線功能,方便使用者隨時加入分隔線,但是 Blogger 目前尚未有這功能,只能在 HTML 編輯處自行加入 <hr />,因此在網路上找了讓分隔線美化的 CSS,共有以下幾種供參考。
出自 CSS生成漂亮的水平分隔线(horizontal rule)设计效果。
範本:
- 普通分隔線
- 漸變
- 透明漸變
- 雙線
- 單線陰影
- 雲朵状
- 内嵌
- 暈状
- 文字插入式
欲在文章中加入特別的分隔線,以漸變來做說明。
<style> 與 </style> 之間加入喜歡的分隔線 CSS,然後將 <hr class="style-one" /> 裡的 style-one 替換成所選擇的那個就可以呈現出來囉!
⬇️ 結果如以下這段:
<style> hr.style-one { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); } </style> <hr class="style-one" />
⬇️ 以下是分隔線種類的 CSS:
/* 漸變 color1 - color2 - color1 */ hr.style-one { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); } /* 透明漸變 - color - transparent */ hr.style-two { 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.style-three { border: 0; border-bottom: 1px dashed #ccc; background: #999; } /* 單線陰影 */ hr.style-four { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5); } /* 雲朵状 */ hr.style-five { border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black; } hr.style-five:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ } /* 内嵌 */ hr.style-six { 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.style-seven { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.style-seven:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; } /* 文字插入式 */ hr.style-eight { padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr.style-eight:after { content: "請輸入文字"; display: inline-block; position: relative; top: -0.7em; font-size: 1.5em; padding: 0 0.25em; background: white; }
留言
張貼留言