css中怎么实现线性渐变？下面本篇文章给大家介绍一下css线性渐变函数linear-gradient()的使用方法，并聊聊线性渐变的多种应用，希望对大家有所帮助！
linear-gradient
1. 语法
linear-gradient([[to |css】
1）默认
立即学习“前端免费学习笔记（深入）”；
二者默认都是从上到下
background-image:linear-gradient(#00ffff, #ff1493, #006699);background-image:-webkit-linear-gradient(#00ffff, #ff1493, #006699)
登录后复制
2）: [left|right]|[top|bottom]的使用
二者表现方向相反
background-image:linear-gradient(to left, #00ffff, #ff1493, #006699);background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);
登录后复制
background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699);background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);
登录后复制
3）css）
background-image:linear-gradient(275deg, #ff1493, #000000, #006699);background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);
登录后复制
background-image:linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);background-image:-webkit-linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);
登录后复制
background-image:linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%); background-image:-webkit-linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);
登录后复制
background-image:linear-gradient(right, #ff1493 60px, #000000 20px);background-image:-webkit-linear-gradient(right, #ff1493 60px, #000000 20px);
登录后复制
/* 3种颜色平分，渐变中心为1/3和2/3处 */background-image:linear-gradient(to right, #ff1493, #000000, #006699); /* 渐变中心在10%和20%处 */background-image:linear-gradient(to right, #ff1493, 10%, #000000, 20%, #006699);
登录后复制
background-image:repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px);background-image:-webkit-repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px)
登录后复制
background-image: linear-gradient(45deg, rgba(255, 0, 76, 0.7), rgba(0, 0, 255, 0) 80%), linear-gradient(135deg, rgba(106, 0, 128, 1), rgba(0, 128, 0, 0) 80%), linear-gradient(225deg, rgba(0, 255, 255, 1), rgba(0, 255, 255, 0) 80%), linear-gradient(315deg, rgba(255, 192, 203, 0.7), rgba(255, 192, 203, 0) 80%);
登录后复制
background-image: repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px), repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px); background-image: repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px), repeating-linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);
登录后复制
#wrap { width: 180px; height: 40px; border: 5px solid transparent; border-image: linear-gradient(45deg, aqua, pink, purple) 1;}
登录后复制
#wrap { width: 180px; height: 40px; border: 5px solid transparent; border-image: linear-gradient(45deg, aqua, pink, purple) 1; clip-path: inset(0 round 5px);}
登录后复制
#wrap { width: 180px; height: 40px; border-radius: 20px; background: #FFF; position: relative;}#wrap::before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background-image: linear-gradient(45deg, aqua, pink, purple); border-radius: 25px; z-index: -1}/*或者*/#wrap { width: 180px; height: 40px; border-radius: 20px; background: #FFF; position: relative; border: 5px solid transparent; background-origin: border-box; background-image: linear-gradient(#FFF, #FFF), linear-gradient(45deg, aqua, pink, purple); background-clip: padding-box, border-box;}/*或者*/#wrap { width: 180px; height: 50px; border: 5px solid transparent; border-radius: 25px; background-image: linear-gradient(45deg, aqua, pink, purple); background-origin: border-box;}#content { width: 100%; height: 100%; border-radius: 20px; background: #FFF;}
登录后复制
Darker CMJ#wrap { font-size: 40px; line-height: 40px; font-weight: bold; background-clip: text; -webkit-background-clip: text; // color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(45deg, aqua, pink, purple);}
登录后复制
以上就是浅析CSS中怎么实现线性渐变（linear-gradient）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2866844.html
