前端素材解析—利用linear制作复杂的边框效果

59 阅读 0 评论 39 点赞

我是靠谱客的博主曾经裙子，最近开发中收集的这篇文章主要介绍前端素材解析—利用linear制作复杂的边框效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box {
            margin: 80px 30px;
            width: 200px;
            height: 200px;
            position: relative;
            background: #fff;
            float: left;
        }

            .box:before {
                content: '';
                z-index: -1;
                position: absolute;
                width: 220px;
                height: 220px;
                top: -10px;
                left: -10px;
            }

        .first:before {
            background-image: linear-gradient(90deg, yellow, gold);
        }

        .second:before {
            background-image: line