border样式

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;

实现的效果如下：

完整的代码如下：

<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>