CSS3——gradient渐变

原创 2015年07月08日 12:33:07

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg{
		    width:300px;
		    height:250px;
		    background-image:-webkit-gradient(linear,14% 48%,35% 0%,
		                                        from(#d86707),
		                                        color-stop(.5,#d86707),
		                                        color-stop(.5,transparent),
		                                        to(transparent)
		                    ),
		                     -webkit-gradient(linear,48% 0,62% 35%,
		                                        from(#d86707),
		                                        color-stop(.5,#d86707),
		                                        color-stop(.5,transparent),
		                                        to(transparent)
		                    ); 
		    background-size: 19px 10px;
		    background-repeat:repeat-y;
		    background-position:0 100%;  
		}
	</style>
</head>
<body>
	<div class="bg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg{
		    width:300px;
		    height:250px;
		    background-image:-webkit-gradient(linear,50% 0,0 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)    
		                    ),
		                    -webkit-gradient(linear,50% 0,100% 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)
		                    ); 
		    background-image:-moz-linear-gradient(50% 0,0 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)    
		                    ),
		                    -moz-linear-gradient(50% 0,100% 100%,
		                                        from(transparent),
		                                        color-stop(.5,transparent),
		                                        color-stop(.5,#d86707),
		                                        to(#d86707)
		                    ); 
		    background-size: 19px 10px;
		    background-repeat:repeat-x;
		    background-position:0 100%;  
		}
	</style>
</head>
<body>
	<div class="bg"></div>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

分针网——每日分享:CSS3之径向渐变(radial-gradient)

本文转自:http://www.f-z.cn/id/286 这篇文章主要对径向渐变进行详解,也是分为带内核和不带内核两种情形。 1 带内核的径向渐变...

浅谈CSS3新特性——线性渐变linear-gradient

渐变:两种或多种颜色之间的平滑过渡。 线性渐变是多种颜色沿渐变线过渡。 渐变的实现由两部分组成:渐变线和色标。渐变线用来控制发生渐变的方向;色标包含一个颜色值和一个位置,用来控制渐变的颜色变化。浏览器...

使用CSS3线性渐变(linear-gradient)实现文本波浪线效果

我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。 比如你只是想调...
  • iefreer
  • iefreer
  • 2016年03月13日 18:48
  • 9887

CSS3实践之路(二): 颜色渐变(Gradient)和背景(Backgroud)

1. 颜色 和 透明度 在CSS3中对颜色进行了很多扩展,具体详情可参照官网:www.w3.org/TR/2003/CR-css3-color-20030514,下面说下CSS3中新的数字定义颜色的方...

CSS3线性渐变(linear-gradient)

.example-webkit{ width: 100px; ...

CSS3 Gradient 渐变

CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在...

CSS3 径向渐变 radial-gradient

代码: CSS3 径向渐变 *{margin:0;padding:0;} ul * { width:200px; height:200px; m...

css3 gradient 渐变使用

CSS3渐变分为线性渐变和径向渐变,具体见下代码,可以复制完整代码在浏览器中打开看效果: 渐变 *{ ...

CSS3 线性渐变 linear-gradient

可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂...

关于CSS3颜色渐变(liner-gradient)的心得(%的用法)

在w3cschool学习了css3的渐变属性。其中的liner-gradient(xx, color1 xx%, color2 xx%)令我感到困惑。不过在自己一番研究后总算有了点收货。 w...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3——gradient渐变
举报原因:
原因补充:

(最多只允许输入30个字)