html5 - css3 线性渐变实现间断线条效果-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

html5 - css3 线性渐变实现间断线条效果

怪我咯 2017-04-17 13:30:33

482

上图是我现做出来的效果！但是这个效果和我想要的还有差别，对比下面我要的效果图

我使用线性渐变做的，可是渐变带有渐变效果，有没有某种技巧让中间个文字交接的地方没有渐变效果呢？
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代码：

怪我咯

走同样的路，发现不同的人生

reply all (5)

左手右手慢动作2017-04-17 13:32:33 5 floor

如果你的关注点在linear-gradient上，可以这样写，不需要用伪元素
background-image: linear-gradient(to right, #fb3 40%, #58a 0,#58a 60%, #fb3 0);

Like+0

Add Reply

巴扎黑2017-04-17 13:32:33 4 floor

使用伪元素:after :before

Like+0

Add Reply

左手右手慢动作2017-04-17 13:32:33 3 floor

不加渐变不就没有了

Like+0

Add Reply

洪涛2017-04-17 13:32:33 2 floor

为啥要执着于渐变，直接用一条长线，中间那个“第三方登录”搞个方块p，背景色调成和后面背景色一样的，把线段中间盖住不就行了。

Like+0

Add Reply

PHPzhong2017-04-17 13:32:33 1 floor

我最后的解决办法：
点击查看
html代码：

 第三方登陆

css代码：

.style-eight { box-sizing: content-box; margin-bottom: 20px; } .style-eight:after { content: ""; display: inline-block; position: relative; top: -6px; padding: 0 10px; width: 20%; height: 1px; background-image: linear-gradient(to right, #808080, #808080); } .style-eight:before { content: ""; display: inline-block; position: relative; top: -6px; padding: 0 10px; width: 20%; height: 1px; background-image: linear-gradient(to right, #808080, #808080); }

Like+0

Add Reply