首页 / CSS3 / 利用CSS3的线性渐变linear-gradient制作边框的示例代码分享

利用CSS3的线性渐变linear-gradient制作边框的示例代码分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用CSS3的线性渐变linear-gradient制作边框的示例代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3526字，纯文字阅读大概需要6分钟。

内容图文

linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例代码分享

一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。
所以用上个方法联想到了线性渐变（linear-gradient）

.line li{  border: none;   
  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
  background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
  background-image: -o-linear-gradient(#222 50%,transparent 50%);   
  background-image: linear-gradient(#222 50%,transparent 50%);   
  background-size:  100% 1px;   
  background-repeat: no-repeat;   
  background-position: bottombottom;}
<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>

OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数

如 left描边需要改变：

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
background-size:  1px 100%;   
background-position: left;

具体的都不一一列出了。


利用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: 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方法实现绚丽边框的代码和解释，大家可以在本地进行实现，以此发现更多新奇的组合实现方法。

以上就是利用CSS3的线性渐变linear-gradient制作边框的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的利用CSS3的线性渐变linear-gradient制作边框的示例代码分享全部内容，希望文章能够帮你解决利用CSS3的线性渐变linear-gradient制作边框的示例代码分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/414430.html

来源：【匿名】