border边框在前端页面开发中经常使用，但是，细心的你是否有发现，border其实是没有长度属性可以设置的，只能通过变通的方式来实现工具/原料morevisual studio code方法/步骤1/7分步阅读

打开visual studio code开发工具，新建一个文件，保存为html文件格式，然后，在文件中输入一个感叹号，再按一下Tab键，就会快速创建H5格式的html文档结构

2/7

在页面上添加一个span标签，span标签是行内元素，内容多宽就占用多宽，默认不会像div一样占用一整行，此时还未添加border

3/7

在浏览器中打开这个页面文件，就可以看到运行效果，界面只有几个文字，没有边框

4/7

接下来，给span标签添加下边框，在span标签中添加 style=border-bottom:solid 1px red;

5/7

在浏览器中打开后就可以看到，页面文字下面有了下边框，而且文字有多长，边框就有多长

6/7

那么，假设只想给border加下边框， 该怎么处理呢？将border包裹一层span标签，并将外面span的样式移到内部span即可

7/7

再次在浏览器运行，就可以看到，只有border文字有了下边框，其他文字没有了边框。因为border不能设置长度，但是可以设置dom元素的长度来达到设置border长度的效果

CSSBORDER边框设置长度