一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样[粗了]，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。
所以用上个方法联想到了线性渐变（linear-gra die nt）
CSS Code 复制内容到剪贴板
.line&nbs p; li{ border : none ; background -i mage : - 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-re PE at : no-repeat ; background-pos IT ion : bottom bottom ;}
XM L/HT ML Code 复制内容到剪贴板
< ul class = "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 , transparent 50%, #222 50%); background - size : 1px 100%; background-position : left ;
具体的都不一一列出了。
利用 linear 制作 复杂的边框效果
另外，在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的 电 脑中查看效果：
CSS Code 复制内容到剪贴板
<!DOCTYPE html> <html lang= "en" xmlns= "http://HdhCmsTestw3. org /1999/xhtml" > <head> < ;m eta charset= "utf-8" /> <title></title> <style> .box { m arg in : 80px 30px ; width : 200px ; h ei ght : 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(90 deg , yellow , gold); } .second:before { background-image : linear-gradient(0deg, orange, red ); } .third:before { background-image : repeating-linear-gradient(-45deg, #cc2a2d , #cc2a2d 30px , # f2 f2f2 30px , #f2f2f2 40px , #0e71bb 40px , #0e71bb 70px , #f2f2f2 70px , #f2f2f2 80px ); } </style> </head> <body> <div class= "box first" ></div> <div class= "box second" ></div> <div class= "box third" ></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方法实现绚丽边框的代码和解释，大家可以在本地进行实现，以此发现更多新奇的组合实现方法。
总结
以上是 为你收集整理的 利用CSS3的线性渐变linear-gradient制作边框的示例 全部内容，希望文章能够帮你解决 利用CSS3的线性渐变linear-gradient制作边框的示例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用CSS3的线性渐变linear-gradient制作边框的示例的详细内容...