今天设计给的稿件的分割线不是平常常见的那种，还给了两条垂直的线。
比如像这样：
看到这张图，第一反应用两条hr，再设置hr的border-left/right。然而这并不能实现这样的效果。
当你给hr设置高度的时候，如果不设置border:none，hr看上去变成了一个有着灰色边框的盒子。比如像这样：
hr{ height: 15px; /*border:none;*/ /*border-top:1px solid red;*/ /*border-right: 1px solid red;*/ }
效果如图：
注释部分取消注释后：
折腾了够久了。期间还试验了文字前面：before ：after写法~然而依旧折腾得够呛。
突然觉得，我何不弄简单点。
比如像这样：
<style> .box{ width: 600px; display: flex; align-items: center; margin-top: 20px; } .div1, .div3{ flex:1.4; border-top: 1px solid red; } .div2{ flex:1; text-align: center; border-left: 1px solid red; border-right: 1px solid red; font-size:36px; line-height: 16px; padding: 0 20px; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2">我的文字</div> <div class="div3"></div> </div> </body>
用 Flex 大容器包裹三个盒子，属性设置 align-items: center。使得3个盒子垂直居中对齐。
再给文字设置border-left/right。
注意，这里第二个div文字部分不设置height，而是用设置line-height来达到缩短 border-left/right的高度。
得到的就是文章开头图片那样的效果。
另外一个今天折腾了一小会的是关于 line-gradient。下次再说。