border边框属性的拆开方式 border按三要素来拆开 border按方向来拆开

本文链接：https://blog.youkuaiyun.com/weixin_72303943/article/details/125504633

border是一个大综合属性，

border:1px solid red;

border属性能够被拆开，有两大种拆开的方式：

1）按3要素:border-width、border-style、border-color

2）按方向：border-top、border-right、border-bottom、border-left

1、按三要素拆开
<style>
        /* 把边框border按3要素拆开 */
        .box{
            width: 300px;
            height: 300px;
            /* 边框3要素:border-width、border-style、border-color */
            /* border-width: 10px; */
            /* border-style: dotted; */
            /* border-color: pink; */

            /* 上下10  左右20 */
            /* 按3要素拆开: */
            border-width: 10px 20px;
            border-style: solid dashed dotted;
            border-color: pink green orange blue;
           
        }

       
    </style>
</head>
<body>
   
    <div class="box"></div>
</body>


2、按方向拆开
    <style>
        /* 把边框border按方向来拆开 */ 
        .box{
            width: 300px;
            height: 300px;
            /* 按方向来拆开 */
            border-top: 30px solid red;
            border-right: 30px solid green;
            border-bottom: 30px solid blue;
            border-left: 30px splid pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>

预览：

1、三要素：