语法

background: linear-gradient(direction,color-stop1,color-stop2,...);

• direction：用角度值指定渐变的方向（或角度）。
• color-stop1,color-stop2,...：用于指定渐变的起止颜色。

注意：至少需要两种颜色。

第一个

background: linear-gradient(to left,#d3959b,#bfe6ba);

to left 设置渐变 从右到左，相当于 270deg。

第二个

background: linear-gradient(to right,#d3959b,#bfe6ba);

to right 设置渐变 从左到右，相当于 90deg。

第三个

background: linear-gradient(to top,#d3959b,#bfe6ba);

to top 设置渐变 从下到上，相当于 0deg。

第四个

background: linear-gradient(to bottom,#d3959b,#bfe6ba);

第五个

background: linear-gradient(to top right,#d3959b,#bfe6ba);

to right top = to top right ：从左下角到 右上角，对角线角度

第六个

background: linear-gradient(45deg,#d3959b,#bfe6ba);

和 to top right 有细微差别（背景为正方形的时候无差别）。

第七种

background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始颜色的位置，默认值为 0%。

第八种

background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

第九种

background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

第十种

background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

rgba 使用了 0.5 的透明度。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML页面中怎么实现url链接自动刷新或新页面打开的效果

  这篇文章主要介绍了html实现a元素href的URL链接自动刷新或新窗口打开,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS背景图片自适应屏幕代码示例

  很多人在做网站页面设计的时候，经常会用一张图片来做背景，这时我们就需要考虑网页兼容各种屏幕大小，背景图片要能够按比例缩放来自适应屏幕的宽度。那么这个效果是如何实现的呢？下面是具体的实现代码，感兴趣的朋友一起来学习一下吧。

• CSS框架开发有什么优点呢？

  CSS框架开发有什么优点呢？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• 用Canvas怎样实现心电图的效果，代码是什么

  本篇文章给大家带来的内容是关于如何使用html5 canvas实现心电图的移动效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

• CSS实现无滚动条滚动如何做，代码怎么写

  这篇文章主要介绍了使用CSS实现无滚动条滚动的两种方法,需要的朋友可以参考下