渐变

CSS3即将引入为一个盒子指定背景渐变的功能。渐变通过background-image属性来创建。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
	#gradient {
		/* fallback color */
		ackground-color: #66cccc; 
		/* fallback image */
		background-image: url("images/fallback-image.png"); 
		/* Firefox 3.6+ */
		background-image: -moz-linear-gradient(#336666, #66cccc);
		/* Safari 4+, Chrome 1+ */
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666));
		/* Safari 5.1+, Chrome 10+ */
		background-image: -webkit-linear-gradient(#336666, #66cccc); 
		/* Opera 11.10+ */
		background-image: -o-linear-gradient(#336666, #66cccc);
   		height: 150px;
		width: 300px;}
		</style>
    </head>
    <body>
      <div id="gradient"></div>
    </body>
</html>

 

posted @ 2018-08-11 17:30  梦人亭  阅读(117)  评论(0)    收藏  举报