Rumah > Artikel > hujung hadapan web > 利用CSS中linear制作复杂的边框效果实例分析

利用CSS中linear制作复杂的边框效果实例分析

高洛峰asal: 2017-03-13 17:35:131938semak imbas

这篇文章主要介绍了利用CSS中linear制作复杂的边框效果实例分析的相关资料，利用linear-gradient属性制作绚丽的边框效果

网上看到一种利用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: &#39;&#39;;     
                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: linear-gradient(0deg, orange, red);     
        }     

        .third:before {     
            background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
        }     
    </style>
</head>
<body>
    <p class="box first"></p>
    <p class="box second"></p>
    <p class="box third"></p>
</body>
</html>

有代码可以看出，其实我们并没有使用border，那么这种边框效果是怎么实现的呢？
总体思路是，我们先定义一个白色的p，在定义一个白色方块大一圈的带颜色的p。两个重叠一下，并且让白色的p覆盖彩色p，就实现了边框的效果。
这里面用到的css知识点很多。

1、:before伪类

通过上面的代码我们看出，其实我们在定义的白色p中定义了一个:before伪类，把彩色方块所有的样式都放在了这里。这是因为使用:before定义可以使得定位更加方便，只要调整top和left为边框的宽度就可以了。同时也是的二者成为一个整体。

2、linear-gradient

现在很多浏览器都支持这个css方法。该方法有以下三种使用模式：
①background:linear-gradient(top,#fff,#000)
这段代码的意思是，从上部开始为白色，到底部为黑色进行过度。
②background:linear-gradient(top,right,#fff,#000)
这段代码关于位置传递了两个参数，top和right，表示从右上放开始，到左下方变化，其他道理与第一个相同。
③background:linear-gradient(30deg,#fff,#000)

这段代码的第一个参数传递的是角度，其实道理和位置是一样的，只是不是从标准的位置开始变化了。那么角度和位置的对应关系是什么呢？根据实验，0度对应bottom，90度对应left，180度对应top，360度对应right。

以上就是利用linear方法实现绚丽边框的代码和解释，大家可以在本地进行实现，以此发现更多新奇的组合实现方法。

Atas ialah kandungan terperinci 利用CSS中linear制作复杂的边框效果实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：实现CSS3不透明度完整代码Artikel seterusnya：使用CSS边框特效实现技巧分享

Artikel berkaitan

Lihat lagi