border样式
1.实线边框:solid
border: 1px solid #131313;
2.点线边框:dotted
border: 1px dotted #131313;
3.虚线边框:dashed
border: 1px dashed #131313;
4.双线边框:double
border: 3px double #131313;
border-style中元素对应的方位分别为上、右、下、左
5.上边框是点状、右边框是实线、下边框是双线、左边框是虚线
border-style:dotted solid double dashed;
6.上边框是点状、右边框和左边框是实线、下边框是双线
border-style:dotted solid double dashed;
7.上边框和下边框是点状、右边框和左边框是实线
border-style:dotted solid;
实现的效果如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/534645b322b594fafd7c59ee3c993188.png#pic_center)
完整的代码如下:
<template>
<div style="display: flex;" class="borderDemo">
<!-- 1.实线边框:solid-->
<div style="width: 400px;height: 200px;border: 1px solid #131313;" >
<!-- 使div中的文字居中,text-align:center(水平居中),line-height:200px(垂直居中) -->
<span style="text-align: center;line-height: 200px;">实线边框</span>
</div>
<!-- 2.点线边框:dotted -->
<div style="margin-left: 20px; width: 400px;height: 200px;border: 1px dotted #131313;" >
<span style="text-align: center;line-height: 200px;">点线边框</span>
</div>
<!-- 3.虚线边框:dashed-->
<div style="margin-left: 20px; width: 400px;height: 200px;border: 1px dashed #131313;">
<span style="text-align: center;line-height: 200px;">虚线边框</span>
</div>
<!-- 4.双线边框:double-->
<div style="margin-left: 20px; width: 400px;height: 200px;border: 3px double #131313;" >
<span style="text-align: center;line-height: 200px;">双线边框,注意:双向边框的宽度不能小于3px</span>
</div>
<!-- 5. 混合使用:上边框是点状、右边框是实线、下边框是双线、左边框是虚线-->
<div
style="
margin-left: 20px;
width: 400px;
height: 200px;
border-style:dotted solid double dashed;
display: table;"
>
<!-- 使div中的多行文字居中,首先给父级元素设置 display:table;这样就像表格一样实现不管有多少内容都居中显示,
子级元素需要设置vertical-align:middle;display:table-cell;来实现表格一样的展示-->
<span style="text-align: center;vertical-align:middle;display:table-cell;">
混合使用:上边框是点状、右边框是实线、下边框是双线、左边框是虚线
</span>
</div>
<!-- 6. 混合使用:上边框是点状、右边框和左边框是实线、下边框是双线-->
<div
style="
margin-left: 20px;
width: 400px;
height: 200px;
border-style:dotted solid double dashed;
display: table;"
>
<span style="text-align: center;vertical-align:middle;display:table-cell;">
上边框是点状、右边框和左边框是实线、下边框是双线
</span>
</div>
<!-- 7. 混合使用:上边框和下边框是点状、右边框和左边框是实线-->
<div
style="
margin-left: 20px;
width: 400px;
height: 200px;
border-style:dotted solid;
display: table;"
>
<span style="text-align: center;vertical-align:middle;display:table-cell;">
上边框和下边框是点状、右边框和左边框是实线
</span>
</div>
</div>
</template>