问

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

田卫涛1983_407 发布于 2022-11-03 22:05

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

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

5 个回答

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

<p class="style-eight">
                    第三方登陆
                </p>

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);
            }

2022-11-06 09:44 回答

mobiledu2502889113

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

2022-11-06 09:49 回答

一月的泰迪熊
不加渐变不就没有了

2022-11-06 09:54 回答

sawrf12454_191
使用伪元素:after :before

2022-11-06 09:57 回答

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

2022-11-06 10:01 回答

蒲哟独CrRz

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签