我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

小编给大家分享一下css3如何将背景设置为渐变色,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司是专业的柏乡网站建设公司,柏乡接单;提供网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行柏乡网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

设置方法:1、使用“background:linear-gradient(渐变方向,颜色1,颜色2,..);”语句;2、使用“background:radial-gradient(shape 大小 位置,开始颜色,..,终止颜色);”语句。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

渐变 Gradient

CSS3 渐变(gradients)可以让在两个或多个指定的颜色之间显示平稳的过渡。对比使用渐变图片,gradients 可以减少下载的时间和宽带的使用,并且在放大时看起来效果更好。

线形渐变

颜色值沿着一条隐式的直线逐渐过渡。由 linear-gradient() 产生。

为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

/* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

语法

linear-gradient([  | to  ,]?  )
  • :用角度值指定渐变的方向(或角度)。角度顺时针增加。

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

  • :描述渐变线的起始点位置。to top, to bottom, to leftto right 这些值会被转换成角度 0 度180 度270 度90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。

  • :颜色变化列表。支持透明度(rgba(255,0,0,0.1))。

示例:背景色线性渐变--background-image+linear-gradient()



	
		
		css背景渐变--线性渐变
		
	
	
		
			基本线性渐变--自上而下
    基本线性渐变--45度角

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

径向渐变

radial-gradient() CSS 函数创建了一个图像,该图像的颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点,也可以指定渐变的中心(默认在中心点,center)、形状(默认椭圆形 ellipse)、大小(默认 farthest-corner,表示到最远的角落)

语法

radial-gradient(
  [shape size at position] ?
   [ ,  ]+
)

示例:背景色径向渐变--background-image+radial-gradient()



	
		
		css背景渐变--径向渐变
		
	
	
		
			
			
		
	

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

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient()repeating-radial-gradient() 函数产生。

重复函数的参数同上,不同的是它会基于渐变长度(最后一个色标和第一个之间的距离)倍数重复。



	
		
		css背景渐变--重复渐变
		
	
	
		
			
			
		
	

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

以上是“css3如何将背景设置为渐变色”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站题目:css3如何将背景设置为渐变色
文章源于:http://shouzuofang.com/article/gdpgps.html

其他资讯