CSS实现自适应分隔线的N种方法

使用CSS创建自适应分隔线的创意方法
最新推荐文章于 2023-07-11 21:05:50 发布
原创 最新推荐文章于 2023-07-11 21:05:50 发布 · 258 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了三种使用CSS实现自适应分隔线的方法：1) 通过伪元素结合`transform: translateX(-100%)`；2) 利用伪元素与`flex`布局；3) 结合伪元素、`box-shadow`/`outline`和`clip-path`。每种方法都提供了具体的HTML结构和CSS样式示例，确保在不同场景下能自适应地展示分隔线。

分割线是网页中比较常见的一类设计了，比如说知乎的更多回答

image

这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应

偷偷的看了一下知乎的实现，很显然是用一块白色背景覆盖的，加一点背景就露馅了

image

心想：知乎的前端也不怎么样？ 可能别人的重点不在这些上面吧

下面列举几种更好的实现方式，不会露馅的那种

1.伪元素+transform:translateX(-100%);

　　主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置足够的宽度，然后把左边的往左位移100%就可以了，父级记得超出隐藏。

具体实现如下

html结构为

<div class="title">我是分割线</div>
最低0.47元/天 解锁文章
使用CSS实现分割线效果
2301_79331421的博客
09-26 1658
在本文中，我们学习了如何使用CSS样式来定义分割线的外观，并将其应用到HTML页面中。CSS是一种用于样式化网页的语言，它可以用来美化HTML元素，包括创建分割线效果。在本篇文章中，我们将学习如何使用CSS来实现分割线效果，并提供相应的源代码。现在，我们已经完成了所有的步骤，可以在浏览器中预览分割线效果了。现在，我们已经创建了HTML结构和CSS样式，接下来需要将它们应用到我们的页面中。接下来，我们需要创建一个CSS样式表，用于定义分割线的外观。首先，我们需要创建一个HTML结构，用于展示分割线效果。
精选资源
CSS巧妙实现自适应分隔线的N种方法
01-21
下面列举几种更好的实现方式，不会露馅的那种 1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置...
【收藏】一些实用的分割线
MajorMayer
03-29 5441
网页中经常会用到一些简单但是实用的分割线。 这里收藏了一些css制作的分割线（拿来主义^_^）分割线one <hr class="style-one"> hr.style-one { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc,
typora 基本使用和更换typora的主题样式
伟庭的博客
06-09 2886
typora 基本使用和更换typora的主题样式
黑马前端三大件
smilecb的博客
07-11 751
前端
css之分割线特效
weixin_41277748的博客
05-15 4181
温馨小提示，下面的盒子用的都是Grid布局，如果想要其他布局可以点击这里CSS Grid Generator 盒子html <div class="parent1"> <div class="div1">斜分割线</div> <div class="div2">SETTINGS</div> <div class="div3">HTML</div> &lt.
CSS创新技巧：无缝自适应分隔线的实现方法
本文主要探讨了如何使用CSS巧妙地实现...这两种方法都可以有效地实现自适应分隔线，而且不会像简单的背景覆盖那样容易暴露实现细节。在实际的网页设计中，可以根据项目的具体需求和浏览器的兼容性选择适合的方法。
CSS自适应分隔线多种实现技巧：避免知乎风格的漏洞
在网页设计中，自适应分隔线是一种常见的元素，能够根据内容动态调整其宽度，以保持页面整洁且美观。本文将介绍两种CSS技巧来实现这种效果，避免像知乎某些设计中可能出现的"露馅"问题。 首先，我们来了解第一种...
css 实现漂亮的分割线
青衫折扇的博客
03-18 4111
<div class="test"></div> .test { width: 100%; height: 10rpx; background-color: #fff; background-image: linear-gradient(0deg, rgba($color: #ff6a00, $alpha:.5) 50%, transparent 50%), linear-gradient(90deg, rgba($color: #ff6a00, $a.
css实现分割线功能,各种各样的分割线(附效果图)
热门推荐
xvzhengyang的博客
07-08 1万+
css hr 分割线
[CSS] 用伪元素:after实现分割线和气泡
05-31
用伪元素:after实现分割线和气泡
使用纯CSS3创建一个纺锤形分隔线
陈小峰（iefreer）的专栏
03-24 6120
纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。 简单讲就是两头小，中间大。使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。
css实现分割线或者小竖线
qq_26889291的博客
11-16 5178
css实现分割线或者小竖线
[极致用户体验] 教你个超牛逼的分割线CSS！
Hull Qin
08-30 6463
给元素之间添加分割线，只需要一行牛逼的CSS！前提是你要学会文中这几个高级的CSS选择器，跟我一起来学习吧！以后秒杀CSS分割线需求！
分割线用CSS样式做出来的效果
weixin_30532987的博客
12-03 466
一：单个标签实现分隔线：.demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; 　　text-align: center; } 二：巧用背景色实现分隔线：.demo_line_02{ heig...
可能是最优雅的分割线实现方式CSS实现
晨露
02-19 2337
前段时间在做项目迭代的时候遇到一个需求，其中包含一条分割线，大致大概长这样： 然后我就看到项目之前实现分割线的方法，基本都是这样实现的： <div>物料下载(仅内网可下载)</div> div{ height: 40px; line-height: 40px; text-align: center; font-size: 12px; color: #ccc; position: relative; margin-bottom: 15px;
html分割线
antiking的专栏
03-20 1万+
html 分割线(转载)                                        【分割线】一、基础代码：1、 2、align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并不是孤立的，可相互组合）1、两头渐变透明： 2、纺锤形： 
css定义一条优雅渐变的分割线
Da_do的博客
05-18 1315
<div style="background:linear-gradient(to left,#FFFFFF,#067859,#FFFFFF);height:1px;"></div> 使用background属性中的渐变参数，linear-gradient，通过参数定义渐变色，定义一个从左到右的渐变，颜色顺序为#FFFFFF-->#FF0000-->#FFFFFF，高度为1px,便可得到一条渐变过渡的分割线。 效果 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值