首页 > itarticle > css3第二集边框属性

css3第二集边框属性

admin 11月 13, 2020 0

边框属性

属性	说明
border-radius	边框圆角
border-image	边框图片

代码演示

<head>
    <meta charset="utf-8" />
    <style>
        /*
        边框属性
        |属性|说明|
        |border-radius|边框圆角|
        |border-image|边框图片|
         */
        .one {
            width: 200px;
            height: 200px;
            border: 2px solid blue;
            /*上、右、下、左*/
            border-radius: 30px 60px 90px;
        }
        .two {
            width: 200px;
            height: 200px;
            border: 2px solid blue;
            /*指定长短轴*/
            border-radius: 30px 60px 90px/90px 60px 30px;
        }
        .three {
            width: 200px;
            height: 200px;
            -webkit-border-image: url(./img/border.png) 26/26px repeat;
        }
    </style>
</head>
<body>
    <div class="one">aaaaaaa</div>
    <div class="two">aaaaaaa</div>
    <div class="three">aaaaaaa</div>
</body>