盒子模型部分

最新推荐文章于 2024-08-24 13:47:49 发布

☞^O^

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量31

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_46026593/article/details/121642712

版权

包含：宽高，内外间距，边框

content：包含width，height

border：边框部分，边框会影响实际盒子大小

border-方向-width: 边框的宽度

border-方向-color: 设置边框颜色

border-方向-style: 设置边框的样式

一次可设置多个边框：四个值：上右下左；三个值：上左右下；两个值：上下左右

border简写：border:颜色，样式，粗细

实例：三角边框的实现：

实现原理：给该元素不设置高度，设置目标三角形边的颜色，其余各边设置为透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        //中间留有间隙
        .box1{
            width:5px;
            height:5px;
            background-color:yellow;
            border-top:30px red solid;
            border-bottom:30px blue solid;
            border-right:30px green solid;
            border-left: 30px pink solid;
        }
        //四个三角形
        .box2{
            width:0;
            /* height:5px; */
            background-color:yellow;
            border-top:30px red solid;
            border-bottom:30px blue solid;
            border-right:30px green solid;
            border-left: 30px pink solid;
        }
        //上三角形
        .box3{
            width:0;
            /* height:5px; */
            /* background-color:yellow; */
            border-top:30px red solid;
            border-bottom:30px transparent solid;
            border-right:30px transparent solid;
            border-left: 30px transparent solid;
        }
        //下三角
        .box4{
            width:0;
            border-top:30px transparent solid;
            border-left:30px rgba(0,0,0,0) solid;
            border-right:30px transparent solid;
            border-bottom:30px green solid;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
    <hr>
    <div class="box3"></div>
    <hr>
    <div class="box4"></div>
</body>
</html>