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

时间:2021-05-08

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

CSS Code复制内容到剪贴板
  • .lineli{border:none;
  • background-image:-webkit-linear-gradient(#22250%,transparent50%);
  • background-image:-moz-linear-gradient(#22250%,transparent50%);
  • background-image:-o-linear-gradient(#22250%,transparent50%);
  • background-image:linear-gradient(#22250%,transparent50%);
  • background-size:100%1px;
  • background-repeat:no-repeat;
  • background-position:bottombottom;}
  • XML/HTML Code复制内容到剪贴板
  • <ulclass="line">
  • <li>linear-gradient</li>
  • <li>linear-gradient</li>
  • <li>linear-gradient</li>
  • </ul>
  • OK,又出来了,但还是有点瑕疵,那么问题来了,就是改变描边位置(left,top,right,bottom)需要修改参数

    如 left描边需要改变:

    CSS Code复制内容到剪贴板
  • background-image:-webkit-linear-gradient(left,transparent50%,#22250%);
  • background-size:1px100%;
  • background-position:left;
  • 具体的都不一一列出了。


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

    CSS Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en"xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <metacharset="utf-8"/>
  • <title></title>
  • <style>
  • .box{
  • margin:80px30px;
  • 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,#cc2a2d30px,#f2f2f230px,#f2f2f240px,#0e71bb40px,#0e71bb70px,#f2f2f270px,#f2f2f280px);
  • }
  • </style>
  • </head>
  • <body>
  • <divclass="boxfirst"></div>
  • <divclass="boxsecond"></div>
  • <divclass="boxthird"></div>
  • </body>
  • </html>
  • 有代码可以看出,其实我们并没有使用border,那么这种边框效果是怎么实现的呢?
    总体思路是,我们先定义一个白色的div,在定义一个白色方块大一圈的带颜色的div。两个重叠一下,并且让白色的div覆盖彩色div,就实现了边框的效果。
    这里面用到的css知识点很多。
    1、:before伪类
    通过上面的代码我们看出,其实我们在定义的白色div中定义了一个: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方法实现绚丽边框的代码和解释,大家可以在本地进行实现,以此发现更多新奇的组合实现方法。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章