一、CSS3新增属性用法整理
1、box-shadow（阴影效果）
2、border-color（为边框设置多种颜色）
3、border-image（图片边框）
4、text-shadow（文本阴影）
5、text-overflow（文本截断）
6、word-wrap（自动换行）
7、border-radius（圆角边框）
8、opacity（透明度）
9、box-sizing（控制盒模型的组成模式）
10、resize（元素缩放）
11、outline（外边框）
12、background-size（指定背景图片尺寸）
13、background-origin（指定背景图片从哪里开始显示）
14、background-clip（指定背景图片从什么位置开始裁剪）
15、background（为一个元素指定多个背景）
16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17、hsla（在hsl的基础上增加透明度设置）
18、rgba（基于rgb设置颜色，a设置透明度）
二、H5新增的标签
1.article: 标签定义外部的内容。
2.aside:标签定义 article 以外的内容。a
3.audio:h5新增音频标签。没有高宽属性。
4.canvas:h5新增画布标签。
5.command: 定义命令按钮(未测试)
6.datalist：标签定义选项列表。
7.datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。
8.details：标签用于描述文档或文档某个部分的细节。
9.figure：标签用于对元素进行组合。
10.figcaption：定义 figure 元素的标题。
11.footer：定义 section 或 document 的页脚。
12.header：定义 section 或 document 的页眉。
13.hgroup：用于对网页或区段（section）的标题进行组合。
14.keygen:标签规定用于表单的密钥对生成器字段
15.mark：标签定义带有记号的文本。
16.meter：通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。
17.nav：定义document或section或article的导航。
18.output：定义不同的输出类型，比如脚本。
19.progress：定义任何类型的任务的进度。
20rp:定义若浏览器不支持 ruby 元素显示的内容
21.rt：定义 ruby 注释的解释
22.ruby：定义 ruby 注释
23section：标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。
24source:audio和video的属性之一。为audio和video定义媒介源。
25.summary:为details定义标题。
26.time:定义日期或时间。
27.video：h5新增视频标签。具有高宽属性。
三、CSS3编码规定：
四、属性选择器
[att^=value]：该属性的值以指定值开始。
[att$=value]：该属性的值以指定的值结束。
[att*value]：该属性的值包含指定的值，而无论其位置。
实例
使用[att$=value]
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div[class$="i"]{color: #30f;font-family: "微软雅黑";font-size: 16px;}</style></head><body><div class="title">该属性的值包含指定的值</div> ???????<div class="ti">除了Internet explore 6，所有的主浏览器都支持属性选择器</div></body></html>运行结果
五、练习
1.使用RGBA颜色值
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">input,textarea {padding: 4px;border: solid 1px #E5E5E5;outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;width: 200px;background: #FFFFFF;box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;}input:hover,textarea:hover,input:focus,textarea:focus {border-color: #C9C9C9;}label {margin-left: 10px;color: #999999;display: block;}.submit input {width: auto;padding: 9px 15px;background: #617798;border: 0;font-size: 14px;color: #FFFFFF;}</style></head><body><form><p class="name"><label for="name">姓名</label><input type="text" name="name" id="name" /></p><p class="email"><label for="email">邮箱</label><input type="text" name="email" id="email" /></p><p class="submit"><input type="submit" value="提交" /></p></form></body></html>运行结果
2.添加阴影效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">img{-webkit-box-shadow: 2px 2px 10px #06c;height: 240px;}div{padding: 5px;margin: 5px;height: 50px;width: 150px;background-color: #ccc;-webkit-box-shadow: 2px 2px 20px #06c;}p{text-shadow: 10px 10px 20px #0066CC;}</style></head><body><img src="img/pic2.jpg" /><div></div><p>添加阴影效果</p></body></html>运行结果
3.设计椭圆图形
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{height: 300px;width: 300px;background: url(img/bg1.jpg) no-repeat;border: 1px solid red;-moz-border-radius: 100px;-webkit-border-radius:100px ;border-radius: 100px;}</style></head><body><div></div></body></html>运行结果
4.定义背景坐标
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div {height: 600px;width: 416px;border: solid 1px red;padding: 120px 4em 0;background: url(img/p3.jpg) no-repeat;-moz-background-origin: border;-webkit-background-origin: border;background-origin: border;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;overflow: hidden;}div h1 {font-size: 18px;font-family: "幼圆";text-align: center;}div p {text-indent: 2em;line-height: 2em;font-family: "楷体";margin-bottom: 2em;}</style></head><body><div><h1>春</h1><p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 </p><p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p></div></body></html>运行结果
六、问题
鼠标移入onmouseover，移出onmouseout
<a href="#" onmouseover="this.style.fontSize=‘30px‘">注册</a>
在js里面添加的属性名使用驼峰法，在css里面使用连接线
HTML5+CSS3（3）
原文地址：https://www.cnblogs.com/zp-frighting/p/10561996.html