1.details 一个简单的收起/展开
Notes
- 111
- 222
- 3333
2.消除表单校验时代默认样式（FF4会用自己的样式）
：invalid { box-shadow : none ;} 3.若旧版浏览器不支持html5表单校验里面的required
input:required,input[required]{ //.....} 4.可提示的input框（datalist）
5.防止旧版浏览器不认识某些元素是块级还是行级
article,aside,figure,footer,header,hgroup,nav,section{ display:block;} 6.关系选择器
//后代选择器 E F//子选择器 E>F//相邻兄弟选择器 E+F//一般兄弟选择器 E~F
7.背景的透明度
body{ background:rgba(0,0,0,0.3);}//最后一个代表透明度alpha，0-1，0为完全透明，1为完全不透明 8.表示颜色的方式：
.first{background-color: #800000;}.second{background-color: maroon;}.third{background-color: rgb(128,0,0);}.fourth{background-color: rgba(128,0,0,1.0);}.fifth{background-color: hsl(0,100%,13%);}.sixth{background-color: hsla(0,100%,13%,1.0);} 9.圆角
/*圆角border-radius*/ -moz-border-radius: 25px; /*每个角可以设置圆角（旧版FF）*/ /*-moz-border-radius-topleft: 5px;*/ /*-moz-border-radius-topright: 5px;*/ /*-moz-border-radius-bottomleftleft: 5px;*/ /*-moz-border-radius-bottomrightleft: 5px;*/ border-radius: 25px; /*每个角可以设置圆角*/ /*borer-top-left-radius:5px;*/ /*borer-top-right-radius:5px;*/ /*borer-bottom-left-radius:5px;*/ /*borer-bottom-right-radius:5px;*/
10.投影
/*投影*//*box-shadow: a b c d rgba(x,x,x,x); a:水平偏移，正值向右，负值向左；b：垂直偏移，正值向下，负值向上；c:阴影模糊距离；d:阴影扩张距离*/-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);-moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
11.页面上有<HTML5>&{CSS3}
<HTML5>&{CSS3}
12.平移，鼠标放上面使元素平移
Put your Dukes up sire
#ad3 h1:hover span{ color: #484848; -webkit-transform: translateX(40px); -moz-transform:translateX(40px); -ms-transform: translateX(40px); -o-transform:translateX(40px); transform:translateX(40px);}#ad3 h1 span{ font-size: 30px; color:#999999; display: inline-block;}