CSS3 经典教程系列：CSS3 径向渐变（radial-gradient）(三)

	　有关于CSS3渐变的东西就完了，大家看完了肯定会想，他主要用在哪些方面呢？这个说起来就多了，最简单的就是制作背景，我们还可以应用其制作一些漂亮的按钮，还可以用他来制作patterns，我在这里列出几种制作patterns的示例代码吧：

	　　HTML代码：

	　　CSS 代码：

	　　ul {

	  overflow: hidden;

	  margin-top: 20px;

	}

	li{

	  width: 150px;

	  height: 80px;

	  margin-bottom: 10px;

	  float: left;

	  margin-right: 5px;

	  background: #ace;

	  /*Controls the size*/

	  -webkit-background-size: 20px 20px;

	  -moz-background-size: 20px 20px;

	  background-size: 20px 20px;

	}

	li.gradient1 {

	  background-image: -webkit-gradient(

	    linear,

	    0 100%, 100% 0,

	    color-stop(.25, rgba(255, 255, 255, .2)),

	    color-stop(.25, transparent),

	    color-stop(.5, transparent),

	    color-stop(.5, rgba(255, 255, 255, .2)),

	    color-stop(.75, rgba(255, 255, 255, .2)),

	    color-stop(.75, transparent),

	    to(transparent)

	    );

	  background-image: -moz-linear-gradient(

	    45deg,

	    rgba(255, 255, 255, .2) 25%,

	    transparent 25%,

	    transparent 50%,

	    rgba(255, 255, 255, .2) 50%,

	    rgba(255, 255, 255, .2) 75%,

	    transparent 75%,

	    transparent

	    );

	  background-image: -o-linear-gradient(

	    45deg,

	    rgba(255, 255, 255, .2) 25%,

	    transparent 25%,

	    transparent 50%,

	    rgba(255, 255, 255, .2) 50%,

	    rgba(255, 255, 255, .2) 75%,

	    transparent 75%,

	    transparent

	  );

	  background-image: linear-gradient(

	    45deg,

	    rgba(255, 255, 255, .2) 25%,

	    transparent 25%,

	    transparent 50%,

	    gba(255, 255, 255, .2) 50%,

	    rgba(255, 255, 255, .2) 75%,

	    transparent 75%,

	    transparent

	    );

	}

	li.gradient2 {

	   background-image: -webkit-gradient(linear, 0 0, 100% 100%,

	      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),

	      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),

	      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),

	      to(transparent));

	   background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,

	      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,

	      transparent 75%, transparent);

	   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,

	      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,

	      transparent 75%, transparent);

	   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,

	      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,

	      transparent 75%, transparent);

	}

	未完 请继续阅读   CSS3 经典教程系列：CSS3 径向渐变（radial-gradient）(四)

本文手机访问二维码

作者：mb119.com 关注度：91 发布时间：2016-04-14 02:07:52

☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站织梦程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ(971977809)进行交流