如何给页面添加虚线

小猫娃来啦

已于 2023-03-03 09:32:29 修改

阅读量3.3k

点赞数 5

分类专栏： Html

于 2022-08-21 10:17:59 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/126447894

版权

HTML CSS 虚线边框新手教程样式属性

关键词由CSDN通过智能技术生成

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

首先我们想一想，哪一板块学习过线？

下划线，删除线。这是对于文本来说，属于文本属性。如果单纯在页面上做一条虚线，这个角度肯定是不行的。
<hr>标签，大家都知道，这是一个单标签，是一条实线。我们只需要添加一些属性，就可以改变显示效果。

<!DOCTYPE html>

<html>

<head>

<style>

#xuxian{

border:1px dashed #000;

}

</style>

</head>

<body>

</body>

</html>

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

我们知道<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>

效果：