利用css画横线或竖线

比眉伴天荒 2022-06-14 08:22 385阅读 0赞

横线：

利用css画横线，可以简单的使用<hr>标签实现，但是如果要实现左右渐变的效果的话，则需要多费一点功夫了，以下有个简单例子：

html代码：（这里使用.是为了让其有值可以显示不为空，也可改为其他值，该值显示在横线中间）

<p class="line">.</p>

css代码：

.er-theme .line{
        position:relative;
        text-align:center;
    }
    .er-theme .line:before,.er-theme .line:after {
        content: "";
        width: 50%;
        height: 4px;
        position: absolute;
        top:50%;
    }
    .er-theme .line:before {
        background: -webkit-linear-gradient(right, #da7676  , #eee);
        background: -o-linear-gradient(left, #da7676  , #eee);
        background: -moz-linear-gradient(left,#da7676  , #eee);
        background: linear-gradient(to left, #da7676  , #eee);
        left: 2px;
    }
    .er-theme .line:after {
        background: -webkit-linear-gradient(left, #da7676  , #eee);
        background: -o-linear-gradient(right, #da7676  , #eee);
        background: -moz-linear-gradient(right,#666 , #eee);
        background: linear-gradient(to right, #da7676 , #eee);
        right: 2px;
    }

利用这个基本的结构，可以根据需求改变

如果要画竖线的话，就需要使用代码来实现，相对来说也比较简单，如下：

html代码：

<div class="Line"></div>

css代码：

Line{
         float: left; width: 0.1em; height: 5em; margin-right: 1em; background: #d4c4c4;}

发表评论取消回复

表情：

评论列表（有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS画三角形

使用css画三角形主要使用到border属性，首先来看一个例子： .demo{ width: 0px; height:0px; border: 50px; borde

灰太狼/ 2022年12月24日 06:00/ 0 赞/ 182 阅读

相关 Echarts - 去掉图表上的横线和竖线

效果图默认效果： ![在这里插入图片描述][20210524162143312.png] 变为如下图所示效果： ![在这里插入图片描述][202105241

╰+哭是因爲堅強的太久メ/ 2022年10月15日 09:57/ 0 赞/ 478 阅读

相关利用css画横线或竖线

横线：利用css画横线，可以简单的使用<hr>标签实现，但是如果要实现左右渐变的效果的话，则需要多费一点功夫了，以下有个简单例子： html代码：（这里使用.是为了让其有

比眉伴天荒/ 2022年06月14日 08:22/ 0 赞/ 386 阅读

相关 css画三角形

给块级标签设置样式即可上三角 width: 0; height: 0; border-left: 50px solid tran

痛定思痛。/ 2022年06月09日 02:14/ 0 赞/ 200 阅读

相关 CSS画雷达

效果图：![这里写图片描述][70] <!doctype html> <html lang="en"> <head> <meta ch

刺骨的言语ヽ痛彻心扉/ 2022年05月31日 14:50/ 0 赞/ 177 阅读

相关 css实现左右横线中间文字效果

样式 .title { display: table; width: 100%; line-height: 32px; background-color: fff

矫情吗；*/ 2022年05月29日 03:49/ 0 赞/ 247 阅读

相关形态学：提取横线、竖线

原理 [OpenCV官网教程][OpenCV] 通过使用不同形状的核，得到不同的结果 1. 提取横线： ![在这里插入图片描述][201812

谁践踏了优雅/ 2022年04月04日 06:06/ 0 赞/ 289 阅读

相关 css 画一条竖线或横线

横线 <div style="width:100px;border: 1px solid d0d0d0;"></div> 竖线： <div

红太狼/ 2021年12月07日 12:04/ 0 赞/ 338 阅读

相关利用css绘制三条横线的菜单图标

今天在慕课网上学习padding属性时，老师利用padding,border,backgroud-clip等属性轻易的使用一个div绘制出了三条横线的菜单图标，像下图这样

悠悠/ 2021年09月16日 01:04/ 0 赞/ 514 阅读

相关利用css画一个棒棒糖

利用css画一个棒棒糖

小灰灰/ 2020年04月26日 06:47/ 2 赞/ 918 阅读