CSS3背景渐变替换图片效果

来源：深圳网站建设发布时间：7/15/2015 12:13:21 AM 浏览次数：

深圳网站建设分享CCS3渐变方法，可以做出图片渐变效果，完全可以使用渐变代替切图，需要的朋友可以参考下

CSS3 之前，必须依赖 Adobe Photoshop 等图形处理软件来制作渐变图，再以背景图片方式添加给元素。而现在，使用 CSS就可以创造出各种渐变效果了。渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性

		CSS Code 
	
				<div class='gradient1'></div>     
			
				<div class='gradient2'></div>     
			
				<div class='gradient3'></div>

CSS 规则如下。

		CSS Code 
	
				/*为元素盒子添加样式*/     
			
				div {     
			
				 height:150px;     
			
				 width:200px;     
			
				 border:1px solid #ccc;     
			
				 float:left;     
			
				 margin:16px;     
			
				}     
			
				/*例 1：默认为从上到下*/     
			
				.gradient1 {     
			
				 background:linear-gradient(#e86a43, #fff);     
			
				}     
			
				/*例 2：从左到右*/     
			
				.gradient2 {     
			
				 background:linear-gradient(left, #64d1dd, #fff);     
			
				}     
			
				/*例 3：左上到右下*/     
			
				.gradient3 {     
			
				 background:linear-gradient(-45deg, #e86a43, #fff);     
			
				}

放射性渐变

在创建放射性渐变时，可以使用参数指定形状、位置、尺寸、颜色和不透明度

		CSS Code 
	
				.gradient1 {     
			
				 background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);     
			
				}     
			
				.gradient2 {     
			
				 background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);     
			
				}     
			
				.gradient3 {     
			
				 background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,     
			
				#4947ba);     
			
				}

上一篇：jQuery实现平滑滚动页面到指定锚点链接的方法
下一篇：新浪IP接口获取城市等地理位置