Home思洋影视事业部网站建设知识库
0 Comments

五大CSS3新技术用法指导(1)

发布于：2013-09-06  |   作者：广州网站建设  |   已聚集：人围观

本文向大家五大CSS3新技术使用，CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性，5个有趣的新技术分别是：圆角、个别圆角、不透明度、阴影和调整元素大小。
广州网站建设,网站建设,广州网页设计,广州网站设计

五大CSS3新技术使用

CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

1：基本标记

CSS3基本标记


在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。

我们的xHTML需要一下div元素:

#round,使用CSS3代码实现圆角.

#indie,应用个别的几个圆角.

#opacity,展示新的CSS3实现不透明度的方式.

#shadow,展示不使用Photoshop的情况下，使用CSS3来实现阴影效果.

#resize,展示如何使用某种CSS来实现重设大小的效果.

综上所述，我们的xHTML应该是这样的:
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”  
    2. 
	
  2. 
		“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns=”http://www.w3.org/1999/xhtml”> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv=”Content-Type”
    6. 
	
  6. 
		content=”text/html;charset=utf-8″/> 
    7. 
	
  7. 
		<title>AnIntroductiontoCSS3;ANettutsTutorial</title> 
    8. 
	
  8. 
		<linkhreflinkhref=”style.css”rel=”stylesheet”
    9. 
	
  9. 
		type=”text/css”/> 
    10. 
	
  10. 
		</head> 
    11. 
	
  11. 
		<body> 
    12. 
	
  12. 
		<dividdivid=”wrapper”> 
    13. 
	
  13. 
		<dividdivid=”round”></div> 
    14. 
	
  14. 
		<dividdivid=”indie”></div> 
    15. 
	
  15. 
		<dividdivid=”opacity”></div> 
    16. 
	
  16. 
		<dividdivid=”shadow”></div> 
    17. 
	
  17. 
		<dividdivid=”resize”> 
    18. 
	
  18. 
		<imgsrcimgsrc=”image.jpg”alt=”resizableimage”
    19. 
	
  19. 
		width=”200″height=”200″> 
    20. 
	
  20. 
		</div> 
    21. 
	
  21. 
		</div> 
    22. 
	
  22. 
		</body> 
    23. 
	
  23. 
		</html> 
    24. 
	
  24. 
		 
    25. 




	下面来创建基本CSS文件:




    
	
  1. 
		body{  
    2. 
	
  2. 
		background-color:#fff;  
    3. 
	
  3. 
		}  
    4. 
	
  4. 
		 
    5. 
	
  5. 
		#wrapper{  
    6. 
	
  6. 
		width:100%;  
    7. 
	
  7. 
		height:100%;  
    8. 
	
  8. 
		}  
    9. 
	
  9. 
		 
    10. 
	
  10. 
		div{  
    11. 
	
  11. 
		width:300px;  
    12. 
	
  12. 
		height:300px;  
    13. 
	
  13. 
		margin:10px;  
    14. 
	
  14. 
		float:left;  
    15. 
	
  15. 
		}  
    16. 
	
  16. 
		 
    17. 




	　正如你上面看到的，我们给每个div元素300px的宽和高，并让它们向左浮动，整个页面的div都留给我们在后面的工作中添加样式。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机