html5css3实现特殊网页效果11例

　　HTML是用来描述网页的一种语言。HTML指的是超文本标记语言（HyperTextMarkupLanguage）
　　HTML不是一种编程语言，而是一种标记语言（markuplanguage）
　　标记语言是一套标记标签（markuptag）
　　HTML使用标记标签来描述网页
　　HTML5是最新的HTML标准。HTML5是专门为承载丰富的web内容而设计的，并且无需额外插件。
　　HTML5拥有新的语义、图形以及多媒体元素。
　　HTML5提供的新元素和新的API简化了web应用程序的搭建。
　　HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
　　CSS是一种描述HTML文档样式的语言。CSS描述应该如何显示HTML元素。
　　CSS用于控制网页的样式和布局。
　　CSS3是最新的CSS标准。
　　CSS3被拆分为模块。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
　　CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用FontFace实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。1标注效果
　　要实现如下效果：
　　HTML5：ruby少rtshort小rtxiort离rtlrt家rtjirt老rtlort大rtdrt回rthurtruby，ruby乡rtxingrt音rtynrt无rtwrt改rtgirt鬓rtbnrt毛rtmort衰rtcurtruby。2与文本换行相关的属性
　　使用说明
　　linebreak
　　用于指定如何（或是否）断行。除了Firefox，其它浏览器都支持。取值包括：
　　auto，使用缺省的断行规则分解文本；
　　loose，使用最松散的断行规则分解文本，一般用于短行的情况，如报纸；
　　normal，使用最一般的断行规则分解文本；
　　strict，使用最严格的断行原则分解文本。
　　wordwrap
　　允许长单词或URL地址换行到下一行。所有浏览器都支持。取值包括：
　　normal，只在允许的断字点换行（浏览器保持默认处理）；
　　breakword，在长单词或URL地址内部进行换行。
　　wordbreak
　　定义文本自动换行。Chrome和Safari浏览器支持不够友好。取值包括：
　　normal：为默认值，允许在字内换行；
　　keepall，对于中文、韩文、日文，不允许字断开；
　　breakall，与normal相同，允许非亚洲语言文本行的任意字内断开。
　　whitespace
　　设置如何处理元素中的空格。所有浏览器都支持。取值包括：
　　normal，默认处理方式；
　　pre，显示预先格式化的文本，当文字超出边界时不换行；
　　nowrap，强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象；
　　prewrap，显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行；
　　preline，保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。3textshadow
　　要实现的效果：
　　CSS3：p｛textalign：font：bold60pxhelvetica，arial，color：textshadow：black0。1em0。1em0。2｝
　　要实现的效果：
　　CSS3：p｛textalign：font：bold60pxhelvetica，arial，color：textshadow：004pxwhite，05px4pxff3，2px10px6pxfd3，2px15px11pxf80，2px25px18pxf20；｝
　　要实现的效果：
　　CSS3：p｛textalign：padding：24margin：0；fontfamily：helvetica，arial，fontsize：80fontweight：color：D1D1D1；background：CCC；textshadow：1px1pxwhite，1px1px333；｝
　　要实现的效果：
　　CSS3：p｛textalign：padding：24margin：0；fontfamily：helvetica，arial，fontsize：80fontweight：color：D1D1D1；background：CCC；textshadow：1px1pxwhite，1px1px333；｝4border的transparent属性
　　要实现的效果：
　　CSS3：demo｛width：0；height：0；borderleft：50borderright：50borderbottom：100｝
　　要实现的效果：
　　CSS3：demo｛width：0；height：0；borderleft：50borderright：50bordertop：100｝
　　要实现的效果：
　　CSS3：demo｛width：0；height：0；bordertop：50borderright：100borderbottom：50｝
　　要实现的效果：
　　CSS3：demo｛height：0；width：120borderbottom：120pxsolidec3504；borderleft：60borderright：60｝5transform：rotate
　　要实现的效果：
　　CSS3和HTML5：styletypetextcss。bubble｛width：200定义框大小，可忽略，让消息框自由收缩height：50background：hsla（93，96，62，1）；定义背景色，必须与下面箭头背景色一致padding：12增加补白，防止消息文本跑到框外position：定义定位包含框，方便定位箭头mozborderradius：8webkitborderradius：8borderradius：8圆角｝。bubble：before｛content：；不显示任何内容width：0；定义箭头内容区大小height：0；position：绝对定位zindex：1；显示在消息框下面｝。bubble。bubbleleft：before｛right：90；top：50；webkittransform：rotate（25deg）；moztransform：rotate（25deg）；transform：rotate（25deg）；定位箭头倾斜角度定义箭头长短、粗细bordertop：20borderright：80pxsolidhsla（93，96，62，1）；borderbottom：20｝p｛margin：50｝左侧消息提示框
　　classbubblebubbleleft6background：repeatinglineargradient
　　要实现的效果：
　　CSS3：html，body｛margin：0；padding：0；height：100；｝body｛background：webkitrepeatinglineargradient（totop，f9f9f9，f9f9f929px，ccc30px）；background：repeatinglineargradient（totop，f9f9f9，f9f9f929px，ccc30px）；backgroundsize：10030position：｝body：before｛content：；display：height：100；width：4borderleft：4pxdoubleFCA1A1；position：left：30｝
　　需要实现的效果：
　　CSS3：。box｛background：lineargradient（135deg，f0030px，fff30px，162e4832px）；color：padding：12px24｝7实现选项卡效果ulliidtab1classhoveronclicksetTab（1，4）明星liliidtab2onclicksetTab（2，4）搞笑liliidtab3onclicksetTab（3，4）美女liliidtab4onclicksetTab（4，4）摄影liulimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com20210825d4a0033988fc8849。jpgimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com20210825181b865fbd4d3308。jpgimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com202108258d92dd1cb77cd4e3。jpgimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com20210825c26ba473c070c87b。jpgbody8表格隔行添加背景色
　　CSS3：tbodytr：nthchild（2n）｛backgroundcolor：f5｝9borderradius
　　圆角表格的CSS3：。borderedtr：lastchildtd：lastchild｛mozborderradius：006px0；webkitborderradius：006px0；borderradius：006px0；｝10borderspacing
　　单线表格的CSS3：table｛bordercollapse：IE7andlowerborderspacing：0；width：100；｝11boxshadow
　　设计图片翘边阴影效果：
　　CSS3：。box｛width：980clear：overflow：height：margin：20｝。boxli｛background：float：position：margin：20px10border：2webkitboxshadow：01px4pxrgba（0，0，0，0。27），004pxrgba（0，0，0，0。1）mozboxshadow：01px4pxrgba（0，0，0，0。27），004pxrgba（0，0，0，0。1）oboxshadow：01px4pxrgba（0，0，0，0。27），004pxrgba（0，0，0，0。1）boxshadow：01px4pxrgba（0，0，0，0。27），004pxrgba（0，0，0，0。1）｝。boxliimg｛width：290height：200margin：5｝。boxli：before｛content：；position：width：90；height：80；bottom：13left：21background：透明背景zindex：2；显示在照片的下面boxshadow：08px20pxrgba（0，0，0，0。8）；添加阴影webkitboxshadow：08px20pxrgba（0，0，0，0。8）；oboxshadow：08px20pxrgba（0，0，0，0。8）；mozboxshadow：08px20pxrgba（0，0，0，0。8）；transform：skew（12deg）rotate（6deg）；变形并旋转阴影，让其翘起webkittransform：skew（12deg）rotate（6deg）；moztransform：skew（12deg）rotate（6deg）；ostransform：skew（12deg）rotate（6deg）；otransform：skew（12deg）rotate（6deg）；｝。boxli：after｛在左侧添加翘边阴影content：；position：width：90；height：80；bottom：13right：21zindex：2；background：boxshadow：08px20pxrgba（0，0，0，0。8）；transform：skew（12deg）rotate（6deg）；webkittransform：skew（12deg）rotate（6deg）；moztransform：skew（12deg）rotate（6deg）；ostransform：skew（12deg）rotate（6deg）；otransform：skew（12deg）rotate（6deg）；｝ulclassboxliimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com20210825989001245fd0188b。jpgliliimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com20210825465153cd3db1aaee。jpgliliimgsrcc2021imgdataimg。jpgdatasrcimg01。71396。com202108258790b7f74b4edc36。jpgliul
　　ref
　　《HTML5CSS3JavaScript从入门到精通（实例版）》
　　End