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">
問題解答
回答1:如果你的關注點在linear-gradient上,可以這樣寫,不需要用偽元素background-image: linear-gradient(to right, #fb3 40%, #58a 0,#58a 60%, #fb3 0);

相關文章:
1. docker 下面創建的IMAGE 他們的 ID 一樣?這個是怎么回事????2. 運行python程序時出現“應用程序發生異常”的內存錯誤?3. node.js - mongodb查找子對象的名稱為某個值的對象的方法4. html5 - datatables 加載不出來數據。5. javascript - QQ第三方登錄的問題6. 前端 - @media query 使用出現的問題?7. javascript - 在 model里定義的 引用表模型時,model為undefined。8. 利用IPMI遠程安裝centos報錯!9. 測試自動化html元素選擇器元素ID或DataAttribute [關閉]10. html5和Flash對抗是什么情況?

網公網安備