如何给页面添加虚线

简介: 如何给页面添加虚线

很多写代码的新手,在做一些简单项目的时候,总会遇到页面有虚线的存在,那么虚线应该怎么添加?


这是一个令人头疼的问题,当然,这个问题博主也头疼过。对于只是掌握html和css的初学者,针对这一问题,其实也是有比较简单的解决办法。下面我就来讲一讲,相信大家都能学会。


首先我们想一想,哪一板块学习过线?


下划线,删除线。这是对于文本来说,属于文本属性。如果单纯在页面上做一条虚线,这个角度肯定是不行的。


标签,大家都知道,这是一个单标签,是一条实线。我们只需要添加一些属性,就可以改变显示效果。

<!DOCTYPE html>
<html>
          <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
               #xuxian{
                      border:1px dashed #000;
               }
        </style>
         </head>
    <body>
        <hr id="xuxian">
    </body>
</html>


     3.还有一个办法,我们可以设置一个空div,对空div进行操作。


我们知道

标签是块级元素,设置宽高,以及背景颜色,它就会显示出一个方框。


但如果,我们将这个空div的高设置成0px,会怎么样呢?


没错,将高设置为0px,之后,也就意味着这个方框的上下两条线重合了,左右两条线因为高度是0,所以变成了一个点,这样就变成一条线了。再设置这个div的border属性,也就是边框属性进而改变成虚线。

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title></title>
        <style>
               .xuxian {
                      border-top-style: dashed;
                      border-top-width: 1px;
                      border-top-color: rgba(221, 73, 0, 1.0);
                      height:  0px;
                      /* width:自己调整 */
               }
        </style>
</head>
<body>
        <div class="xuxian"></div>
</body>
</html>

效果:
说明一下: 实线solid

               虚线dashed

               点线dotted

相关文章
|
小程序
小程序右上角的胶囊颜色怎么修改?
小程序右上角的胶囊颜色怎么修改?
200 0
|
JSON 数据格式
Echarts设置背景的网格线为虚线
Echarts设置背景的网格线为虚线
258 0
|
7月前
边框虚线滚动动画特效
边框虚线滚动动画特效
|
JSON 数据格式
Echarts折线图的折线实线设置成虚线
Echarts折线图的折线实线设置成虚线
203 0
Echarts去掉叠堆折线区域图的区域颜色
Echarts去掉叠堆折线区域图的区域颜色
131 0
|
JavaScript
echarts\pyecharts 实现:两条折线,重叠部分为实线,未重叠部分为虚线
echarts\pyecharts 实现:两条折线,重叠部分为实线,未重叠部分为虚线
echarts\pyecharts 实现:两条折线,重叠部分为实线,未重叠部分为虚线
Winform Chart网格线设置为虚线
Winform Chart网格线设置为虚线
404 0