html 文字两边加横线\竖线\ Css3中间文本两侧横线、左侧添加一个竖线

置顶林中明月间。

已于 2023-12-18 15:36:17 修改

阅读量1.8w

点赞数 3

分类专栏： Html+Css+Js Css3 文章标签： html 文字两边加横线竖线

于 2017-11-11 14:24:05 首次发布

本文链接：https://blog.csdn.net/a772116804/article/details/78506327

版权

Css3 同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

Html+Css+Js

55 篇文章 3 订阅

订阅专栏

css 为左侧添加一个竖线-CSDN博客

左侧添加一个竖线

方法一: border-left

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boder_left {
            width: 200px;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            background-color: pink;
            border-left: 5px solid #2186f8;
        }
    </style>
</head>

<body>
    <div class="boder_left">
        这是一个标题
    </div>
</body>

方法二:伪元素(在前面添加一个矩形)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boder_left {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: pink;
            position: relative;
        }

        .boder_left::before {
            position: absolute;
            content: "";
            display: inline-block;
            width: 6px;
            height: 30px;
            background-color: #014790;
            top: 5px;
            border-radius: 3px;
        }

        .boder_left span {
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div class="boder_left">
        <span>这是一个标题</span>
    </div>
</body>

两边加横线

第一种：

//文本两侧横线 PC

<style>
.exple {
        height: 50px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exple .line {
        display: inline-block;
        width: 100px;
        border-top: 1px solid #ccc;
        height: 2px;
        background: #004aa9;

    }

    .exple .txt {
        color: #686868;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        font-size: 18px;
        margin: 0 15px;
    }
</style>
<div class="exple">
    <span class="line"></span>
       <div class="txt">
            <span>友情链接</span>
            <span>IM LINKS</span>
       </div>
    <span class="line"></span>
</div>

//文本两侧横线 移动
<style>
.products_title{
	width: 100%;
	height: 1rem;
	display:flex;
    justify-content:center;
    align-items:center;
    margin: 0.5rem 0;
}
.products_title .txt{
	font-size: 0.56rem;
	padding: 0 0.6rem;
}
.products_title .line{
	display: inline-block;
	width: 1.2rem;
	height: 1px;
	background: #000;
}

</style>
<div class="products_title">  
		<span class="line"></span>  
		<span class="txt">文字在中间</span>  
		<span class="line"></span> 
	</div>

//竖线

<div class="line"></div>
css中：
.line{
    display:inline-block;
    height: 导航条的高度(或者你觉得合适的高度);
    width: 1px;
    background: #000;
}

//横线
height: 1px;
transform: scale(0.5);
background:red;

css:
.pd_title{
	width: 100%;
	height: 1.4rem;
	display:flex;
	justify-content:center;
	align-items:center;
	margin: 0.5rem 0;
	background: #f2f2f2;
}
.pd_title .txt{
	font-size: 0.56rem;
	padding: 0 0.6rem;
}
.pd_title .line{
	display: inline-block;
	width: 1.2rem;
	height: 1px;
	background: #948e8e;
}

html:
<div class="pd_title">  
          <span class="line"></span>  
          <span class="txt">商品详情</span>  
          <span class="line"></span> 
        </div>

<style>
.title{
	text-align: center;
	font-size: 28px;
	margin: 24px 0;
	display: flex;/*弹性布局*/
}
.title .title_name{
	padding: 0 20px;
}
.title .line{
	background:linear-gradient(
     transparent 49%,
     #000 49%,
     #000 51%,
     transparent 51%
		);
	flex:1;/*均分父级元素、父级元素定义display:flex,子元素宽度用flex来定义各占一半*/
}
</style>

<h2 class="title">
  		<span class="line"></span>
  		<span class="title_name">文本信息</span><!--可以随意增加字-->
  		<span class="line"></span>
  	</h2>

代码解析：

background:linear-gradient();线性渐变
background:linear-gradient(
to top,
red 20%,
green 70%,
blue 90%
);
background:linear-gradient(
red 20%,
green 20%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡。
green 90%,
black 51%
);
接下来：
background:linear-gradient(
tansparent 49%,红色这里改成透明红色占49%
green 49%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡
green 51%,中间绿色就只占2%（51-49）
transparent 51% 再把最后一个颜色改成transparent 中间就只剩下绿色了。黑色51%
)

林中明月间。

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
1
评论
html 文字两边加横线\竖线\ Css3中间文本两侧横线、左侧添加一个竖线

第一种：//横线&lt;style&gt; .exple { height: 50px; line-height: 60px; text-align: center; } .order .line { display: inline-block; width: 250px; // 横线长度 border-top: 1...
复制链接

扫一扫