css3 線性漸變實現間斷線條效果

問題描述

上圖是我現做出來的效果！但是這個效果和我想要的還有差別，對比下面我要的效果圖

我使用線性漸變做的，可是漸變帶有漸變效果，有沒有某種技巧讓中間個文字交接的地方沒有漸變效果呢？css代碼：

hr {text-align:center;box-sizing: content-box;height: 1px;border: 0;/*border-top: 1px solid #808080;*/width: 90%;margin-bottom: 20px;background-image: linear-gradient(to right,#808080,#808080, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0),#808080, #808080); }hr.style-eight:after {content: "第三方登陸";display: inline-block;position: relative;top: -0.7em;color: #808080;/*background-color: #1D263B;*/padding: 0 10px; }

html代碼：

<hr class="style-eight">

問題解答

如果你的關注點在linear-gradient上，可以這樣寫，不需要用偽元素background-image: linear-gradient(to right, #fb3 40%, #58a 0,#58a 60%, #fb3 0);