css3如何将背景设置为渐变色

小编给大家分享一下css3如何将背景设置为渐变色，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 设置方法：1、使用“background:linear-gradient(渐变方向,颜色1,颜色2,..);”语句；2、使用“background:radial-gradient(shape 大小 位置,开始颜色,..,终止颜色);”语句。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。CSS3 渐变（gradients）可以让在两个或多个指定的颜色之间显示平稳的过渡。对比使用渐变图片，gradients 可以减少下载的时间和宽带的使用，并且在放大时看起来效果更好。颜色值沿着一条隐式的直线逐渐过渡。由 linear-gradient() 产生。为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。语法：用角度值指定渐变的方向（或角度）。角度顺时针增加。
：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度 和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。：颜色变化列表。支持透明度（rgba(255,0,0,0.1)）。示例：背景色线性渐变–background-image+linear免费云主机、域名-gradient()radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）语法shape：椭圆形（ellipse，默认）或圆形（circle）size：closest-side， 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。closest-corner， 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。farthest-side， 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。farthest-corner， 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。position：可以是具体的两个位置偏移值（10% 20%），也可以是关键字（left、right、top、bottom）示例：背景色径向渐变–background-image+radial-gradient()重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。以上是“css3如何将背景设置为渐变色”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: TypeScript中的技巧有哪些

这篇文章主要介绍“TypeScript中的技巧有哪些”，在日常操作中，相信很多人在TypeScript中的技巧有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”TypeScript中的技巧有哪些”的疑惑有所帮助！接下来，请跟着…