您的位置：首页 → 网页设计 → HTML/CSS  → 5个实例让你轻松了解CSS3新属性

5个实例让你轻松了解CSS3新属性

时间：2010/2/11 11:11:00来源：本站整理作者：我要评论(0)

5个实例让你轻松了解CSS3新属性：

一、基本代码结构
在开始这个教程之前，我们先把基本的代码结构编写好，我将结合这些代码来讲解介绍。
我们需要如下div代码元素
1、#round，讲解css3圆角效果时使用；
2、#indie，讲解个性圆角效果时使用；
3、#opacity，讲解css3实现透明的新方法；
4、#shadow，在不使用photoshop情况下，如何创建投影效果；
5、#resize，介绍一个新的css3属性，调整缩放元素。

XHMTL代码如下：

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
  5. <title>An Introduction to CSS3; A Nettuts Tutorial</title>
  6. <link href=“style.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <div id=“wrapper”>
  10. <div id=“round”> </div>
  11. <div id=“indie”> </div>
  12. <div id=“opacity”> </div>
  13. <div id=“shadow”> </div>
  14. <div id=“resize”>
  15. <img src=“image.jpg” alt=“resizable image” width=“200″ height=“200″>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

相关视频

    没有数据

相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站（主页）变成黑白DW设计网页时组织CSS的建议

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法