渐变边框

最新推荐文章于 2025-04-27 21:23:58 发布

皮皮猴我们走

最新推荐文章于 2025-04-27 21:23:58 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Rob_gao/article/details/84985210

css 专栏收录该内容

2 篇文章

订阅专栏

创建一个渐变的边框非常简单，可以给元素创建一个层级（z-index）较低的伪类，然后给这个伪类适当的长度和宽度，以及定位，给元素和伪类设置需要的背景颜色，就可以了。代码示例：
css：

        .border1{
            width: 200px;
            height: 200px;
            background: #ffffff;
            position: relative;
            margin: 50px;
        }
        .border1::before{
            content: '';
            z-index: -1;
            position: absolute;
            width: 220px;
            height: 220px;
            top: -10px;
            left: -10px;
            background-image: linear-gradient(90deg, yellow, gold);
        }

html：<div class="border1"></div>
效果图：