css 好看的边框

1、把图片作为边框
css 好看的边框_第1张图片


   border:10px solid transparent;
    border-image:url('./assets/images/login_bg.png') 30 round;
    

2、斜线边框
斜线边框可以给页面元素增加一份生动感。可以使用linear-gradient()函数来设置。
css 好看的边框_第2张图片

 .box{
        position:relative;
        border-top:4px solid #667db6;
        border-bottom:4px solid #5991ce;
        background:
            linear-gradient(45deg, #5991ce 49%, transparent 49%) 100% 0,
            linear-gradient(-45deg, #5991ce 49%, transparent 49%) 100% 100%;
        background-size:30px 30px;
        background-repeat:no-repeat;
    }

你可能感兴趣的:(前端)