边框 - 喵喵知识园

有交界的边都有边框

比如上和左就是有交界的，而上和下就没有交界
当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。

小案例
请输入图片描述

<style>
    div.lefttop{
        width: 150px;
        height: 150px;
        border-top-style: solid;
        border-top-color: red;
        border-top-width: 50px;
        border-left-style: solid;
        border-left-color: blue;
        border-left-width: 50px;
        background-color: lightgray;
    }
    div.alldirection{
        width: 150px;
        height: 150px;
        background-color: lightgray;
        border-top-color: red;
        border-top-width: 50px;
        border-top-style: solid;
        border-left-color: blue;
        border-left-width: 50px;
        border-left-style: solid;
        border-right-color: yellow;
        border-right-width: 50px;
        border-right-style: solid;
        border-bottom: solid green 50px;
    }
</style>
<div class="lefttop">
    左边和上边都有边框
</div>
<br>
<div class="alldirection">
    四边都有边框
</div>

块级元素和内联元素的边框区别

可以看到，块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等

实战斑马线表格
请输入图片描述

<style>
    table{
        border-collapse: collapse;
        width: 90%;
    }
    tr.head{
        border-bottom-width: 2px;
    }
    tr{
        border-bottom-width: 1px;
        border-bottom-color: lightgray;
        border-bottom-style: solid;
    }
    tr.shen{
        background-color: #f8f8f8;
    }
    td{
        width: 25%;
        text-align: center;
    }

</style>
<table>
    <tr class="head">
        <td>id</td>
        <td>名称</td>
        <td>血量</td>
        <td>伤害</td>
    </tr>
    <tr class="shen">
        <td>1</td>
        <td>gareen</td>
        <td>340</td>
        <td>58</td>
    </tr>
    <tr class="qian">
        <td>2</td>
        <td>teemo</td>
        <td>320</td>
        <td>76</td>
    </tr>
    <tr class="shen">
        <td>3</td>
        <td>annie</td>
        <td>380</td>
        <td>38</td>
    </tr>
    <tr class="qian">
        <td>4</td>
        <td>deadbrother</td>
        <td>400</td>
        <td>90</td>
    </tr>
</table>

倒三角实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.daosanjiao{
            width: 0;
            border-top-width: 100px;
            border-top-color: red;
            border-top-style: solid;
            border-left-style: solid;
            border-left-color:white;
            border-left-width: 100px;
            border-right: white solid 100px;

        }
    </style>
</head>
<body>
    <div class="daosanjiao"></div>
    
</body>
</html>

断线下划线
请输入图片描述

<style>
    table{
        width: 100%;
    }
    table td{
        text-align: center;
    }
    table tr.rowborder td{
        background-color: #b2d1ff;
        border-right: 2px solid #fff;
        height: 3px;
    }
</style>

<table>
    <tr>
        <td>商品</td>
        <td>数量</td>
        <td>价格</td>
        <td>小记</td>
    </tr>
    <tr class="rowborder">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

评论