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新特性——线性渐变linear-gradient

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

radial-gradient CSS3的蛋疼的径向渐变

首先,咱来扯一下蛋。下面是扯蛋的代码 > div {   width:100px;height:100px;border-radius:50px;   background:radial-gr...

Gradient─CSS3渐变

来源:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,...

CSS3径向渐变(radial-gradient)

主要整理了下CSS3径向渐变在各大浏览器下的兼容写法,属性参数、各个圆心定位点渐变的使用用法以及多色渐变的简要写法!

css3 radial-gradient 径向渐变

css3 radial-gradient 径向渐变

CSS3之渐变Gradient

渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟。CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。...

css3 渐变色彩(Gradient)

渐变色彩 线性渐变(linear)和径向渐变(radial)由于不同的渲染引引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。 W3C 语法...

CSS3 颜色渐变 gradient

介绍浏览器渐变的区别以及使用方法,linear-gradient,radial-gradient

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

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

CSS3线性渐变(linear-gradient)

.example-webkit{ width: 100px; heigh
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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