html5css3实现特殊网页效果11例

　　HTML 是用来描述网页的一种语言。  HTML 指的是超文本标记语言 (Hyper Text Markup Language)
　　HTML 不是一种编程语言，而是一种标记语言 (markup language)
　　标记语言是一套标记标签 (markup tag)
　　HTML 使用标记标签来描述网页
　　HTML5 是最新的 HTML 标准。  HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
　　HTML5 拥有新的语义、图形以及多媒体元素。
　　HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
　　HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
　　CSS 是一种描述 HTML 文档样式的语言。  CSS 描述应该如何显示 HTML 元素。
　　CSS 用于控制网页的样式和布局。
　　CSS3 是最新的 CSS 标准。
　　CSS3 被拆分为＂模块＂。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
　　CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。1 标注效果
　　要实现如下效果：
　　HTML5: 少shào小xiǎo离lí家jiā老lǎo大dà回huí ，  乡xiāng音yīn无wú改gǎi鬓bìn毛máo衰cuī 。2 与文本换行相关的属性
　　使用说明
　　line-break
　　用于指定如何（或是否）断行。除了Firefox，其它浏览器都支持。取值包括：
　　auto，使用缺省的断行规则分解文本；
　　loose，使用最松散的断行规则分解文本，一般用于短行的情况，如报纸；
　　normal，使用最一般的断行规则分解文本；
　　strict，使用最严格的断行原则分解文本。
　　word-wrap
　　允许长单词或URL地址换行到下一行。所有浏览器都支持。取值包括：
　　normal，只在允许的断字点换行（浏览器保持默认处理）；
　　break-word，在长单词或 URL 地址内部进行换行。
　　word-break
　　定义文本自动换行。Chrome和Safari浏览器支持不够友好。取值包括：
　　normal：为默认值，允许在字内换行;
　　keep-all,对于中文、韩文、日文，不允许字断开；
　　break-all，与normal相同，允许非亚洲语言文本行的任意字内断开。
　　white-space
　　设置如何处理元素中的空格。所有浏览器都支持。取值包括：
　　normal，默认处理方式；
　　pre，显示预先格式化的文本，当文字超出边界时不换行；
　　nowrap， 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象；
　　pre-wrap，显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行；
　　pre-line， 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 3 text-shadow
　　要实现的效果：
　　CSS3：p {     text-align: center;     font: bold 60px helvetica, arial, sans-serif;     color: #fff;     text-shadow: black 0.1em 0.1em 0.2em; }
　　要实现的效果：
　　CSS3：p {     text-align: center;     font:bold 60px helvetica, arial, sans-serif;     color: red;     text-shadow: 0 0 4px white,          0 -5px 4px #ff3,          2px -10px 6px #fd3,          -2px -15px 11px #f80,          2px -25px 18px #f20; }
　　要实现的效果：
　　CSS3：p {     text-align: center;     padding: 24px;     margin: 0;     font-family: helvetica, arial, sans-serif;     font-size: 80px;     font-weight: bold;     color: #D1D1D1;     background: #CCC;     text-shadow: -1px -1px white,           1px 1px #333; }
　　要实现的效果：
　　CSS3：p {     text-align: center;     padding: 24px;     margin: 0;     font-family: helvetica, arial, sans-serif;     font-size: 80px;     font-weight: bold;     color: #D1D1D1;     background: #CCC;     text-shadow: 1px 1px white,           -1px -1px #333; }4 border的transparent属性
　　要实现的效果：
　　CSS3：#demo {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 100px solid red; }
　　要实现的效果：
　　CSS3：#demo {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-top: 100px solid red; }
　　要实现的效果：
　　CSS3：#demo {     width: 0;     height: 0;     border-top: 50px solid transparent;     border-right: 100px solid red;     border-bottom: 50px solid transparent; }
　　要实现的效果：
　　CSS3：#demo {     height: 0;     width: 120px;     border-bottom: 120px solid #ec3504;     border-left: 60px solid transparent;     border-right: 60px solid transparent;  }5 transform: rotate
　　要实现的效果：
　　CSS3和HTML5：