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

作者：fareise 字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3线性渐变,css3背景线性渐变,css3边框阴影,css3边框渐变,css3圆角边框等相关知识,fareise 希望在学习及工作中可以帮助到您

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

</div>

.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;}

</div> </div> </div>

<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>

</div> </div>

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

如 left描边需要改变：

</div>

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

</div> </div>

具体的都不一一列出了。

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

</div>

<!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;

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

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容