整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近写了很多H5页面，在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点，一分钟学会一个前端技能点。想想也很超值，反正哪里都是堵车，学点东西也是挺好的。
今天先说一下CSS渐变背景色的实现，产品小姐姐要求按钮的颜色是绚丽的渐变色，所以我也去查了一下实现。
用到的属性自然还是background，语法是background: linear-gradient(direction, color-stop1, color-stop2, ...);
这个属性可以实现从上到下，从左到右，左上角到右下角，甚至自定义渐变角度的渐变方向。我们常用的就是从上到下和从左到右渐变。
从上到下渐变：
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
从左到右渐变：
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
关于CSS渐变色就和大家介绍到这里，你GET到了吗？欢迎点赞，评论，转发。
者：IT智云编程
链接：https://www.jianshu.com/p/4fa116fc4653
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！
基础样式：
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
第一种方法，使用 background-cli、 text-fill-color：
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
说明 ：
background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
第二种方法，使用 mask-image：
.gradient-text-two{
color:red;
}
.gradient-text-two[data-content]::after{
content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
说明：
mask-image 和 background-image 一样，不仅可以取值是 图片路径，也可以是渐变色。
第三种方法，使用 linearGradient、fill：
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
<svg viewBoxs="0 0 500 300" class="svgBox">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
<stop offset="0" style="stop-color:yellow"/>
<stop offset="0.5" style="stop-color:#fd8403"/>
<stop offset="1" style="stop-color:red"/>
</linearGradient>
</defs>
<text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>
说明：
在SVG中，有两种主要的渐变类型：
线性渐变（linearGradient）
放射性渐变（radialGradient）
SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素
dom示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CSS3渐变字体</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body,html{width:100%;height:100%;}
.wrapper{width:80%;margin:0 auto;margin-top:30px;}
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.gradient-text-two{
color:red;
}
.gradient-text-two[data-content]::after{
content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
</style>
</head>
<body>
<section class="wrapper">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
</div>
<div class="panel-body">
<h3 class="gradient-text gradient-text-one">花样年华</h3>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">方法2. mask-image</h3>
</div>
<div class="panel-body">
<h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">方法3. svg linearGradient</h3>
</div>
<div class="panel-body">
<svg viewBoxs="0 0 500 300" class="svgBox">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
<stop offset="0" style="stop-color:yellow"/>
<stop offset="0.5" style="stop-color:#fd8403"/>
<stop offset="1" style="stop-color:red"/>
</linearGradient>
</defs>
<text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>
</div>
</div>
</section>
</body>
</html>
效果：
这里推荐一下我的前端技术分享群：731771211，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。
使用border-image可以设置渐变色边框，但是当它与border-radius组合使用时，两者却无法兼容。
因此，实现这个效果的另一个思路是：利用两个圆角矩形的面积差形成边框。故可以使用以下方法实现：
使用嵌套的两个div，并设置父元素的内边距padding以此制造面积差，从而形成边框的效果。
HTML
复制代码
<div class="border-box"> <div class="border-content"></div></div>CSS
复制代码
.border-box{ width: 200px; background:linear-gradient(0deg,#00135A,#01A1FF); border-radius: 5px; padding: 2px;/* 边框宽度 */}.border-content{ width: 200px; height: 100px; border-radius: 5px; background-color: white; }使用伪元素充当背景也同样可以达到上述效果，注意设置z-index将伪元素置于内容之下
HTML
复制代码
<div class="border-content"></div>CSS
复制代码
.border-content{ width: 200px; height: 100px; border-radius: 5px; position: relative; background-color: white; }.border-content::before{ content: ''; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px;/* 边框宽度 */ border-radius: 5px; background: linear-gradient(0deg,#00135A,#01A1FF); z-index: -1;/* 置于内容之下 */ }给一个div设置两个不同大小的背景，从而利用两个背景制造面积差，也可以实现上述效果。
使用background-image属性设置两组颜色，一组是内容颜色，另一组是border边框颜色，用逗号隔开。
可以使用background-clip 属性，该属性规定了背景的绘制区域。给一组设置为padding-box（背景绘制区域从内边距框开始），第二组为border-box（背景绘制区域延伸至边框）。
此时的效果如下：
可以看出背景色并不是我们想要的效果，原因是这两组的绘制起点都是padding-box。
使用background-origin属性，该属性规定了背景的绘制区域相对于什么位置来定位。给一组设置为padding-box（背景绘制区域以 padding 区域为参考），第二组为border-box（背景绘制区域以 border 区域为参考）。
此时即可得到想要的效果，代码如下：
HTML
复制代码
<div class="border-content"></div>CSS
复制代码
.border-content{ width: 200px; height: 100px; border: 2px solid transparent; border-radius: 5px; background-clip: padding-box,border-box; background-origin: padding-box,border-box; background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}该思路无法实现透明底的渐变色圆角边框。
*请认真填写需求信息，我们会在24小时内与您取得联系。
