1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animation (rather than a jump from one state to another). transition:[transition-property-default:all], transition-duration, [transition-timing-function-defa…

1.Multiples,Size,and Origin eg:background-image:url(bg.png),url(bullet.png) 0 50% no-repeat,url(arrow.png) right no-repeat background-image background-color background-position background-size:auto length percentage  contain cover background-repeat b…

1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within something直接子女,不包括子孙 3.Adjacent Selector + something immediately following something 直接跟在后面的第一个跟屁虫 CSS3:h1 ~ p { font-weight: bold } will style all paragraphs…

1.Browser-size specific CSS @media screen and (max/min-width:1000px){} 2.Orientation-specific CSS? @media screen and(orientation landscape/portrait){} 3.Divice-specific CSS @media handheld ——not be used widely @media screen and (min-device-height: 76…

1.with the attribute abbr[title]{color:red} 2.with the attribute and it's value input[type=text][disabled]{width:200px;} 3. CSS 3 further allows you to match an attribute without being exact: [attribute^=something] will match a the value of an attrib…

1.@import bolt another stylesheet onto your existing one. @import url(**.css); must be placed at the top of a stylesheet, before any other rules. 2.@media screen, print, projection, handheld, and all, or a comma-separated list of more than one,variab…

1.video <video src="kitties.mp4" poster="fluffy.jpg"(display before video is played) width="300" height="200" loop muted autoplay controls> <img src="hahahaha.jpg" alt="Hilarious cat and capt…

1.<label for"" ></label> <input type="email" placeholder=" " name="" id="">提供可描述输入字段预期值的提示信息(hint). 2.autofocus <input name="query" autofocus> 3.标签定义选项列表.请与 input 元素配合使用该元…

1.background:linear-gradient(20deg/(to) bottom right,orange,red,hsl(60,100%,50%)); 2.-webkit-chrome/safari -o-opera -ms-IE9 exclude "to""at" a fallback 3.backround:radial-gradient(circle closest/farthest-side/corner (at) 100px 200 px,y…

1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:matrix(rotate,scale,translate,skew)? involve maths 3.transform-orign:horizontal vertical 4.3d…