css 好看的边框

最新推荐文章于 2024-04-23 16:26:38 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量630

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/133888054

版权

1、把图片作为边框
在这里插入图片描述


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

2、斜线边框
斜线边框可以给页面元素增加一份生动感。可以使用linear-gradient()函数来设置。
在这里插入图片描述

 .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;
    }