css3基本语法

1.css边框 圆角效果  border-radius
2.css边框 阴影  box-ahadow  box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
3.css边框 阴影  外阴影。
4.css边框 为边框应用图片 border-image:url(borderimg.png) 70 repeat
5.css颜色 rgba  color：rgba(R,G,B,A)
6.css颜色 渐变色彩 linear-gradient(to top left ,blue ,red)
7.CSS3文字与字体 text-overflow   text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
8.CSS3文字与字体 嵌入字体@font-face
9.CSS3文字与字体 文本阴影text-shadow text-shadow: X-Offset Y-Offset blur color; 前两个为偏移值，第三个为模糊程度，最后一个为颜色
10.CSS3背景 background-origin background-origin ： border-box | padding-box | content-box;
11.CSS3背景 background-clip
12.CSS3背景 background-size background-size: auto | <长度值> | <百分比> | cover | contain
13.CSS3背景 multiple backgrounds
14.CSS3选择器 属性选择器
    a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}
15.CSS3 结构性伪类选择器—root
:root {
  background:orange;
}
16.CSS3 结构性伪类选择器—not
input:not([type="submit"]){
  border:1px solid red;
}
17.CSS3 结构性伪类选择器—empty
p:empty {
  display: none;
}​
18.CSS3 结构性伪类选择器—target
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}
19.CSS3 结构性伪类选择器—first-child
ol > li:first-child{
  color: red;
}
20.CSS3 结构性伪类选择器—last-child
.post p:last-child {
  margin-bottom:0;
}
20.CSS3 结构性伪类选择器—nth-child(n)
ol > li:nth-child(2n){
  background: orange;
}
21.CSS3 结构性伪类选择器—nth-last-child(n)
ol > li:nth-last-child(5){
  background: orange;
}
22.CSS3 first-of-type选择器
.wrapper > p:first-of-type {
  background: orange;
}
23.CSS3 nth-of-type(n)选择器
.wrapper > p:nth-of-type(2n){
  background: orange;
}
24.CSS3 last-of-type选择器
 .wrapper > p:last-of-type{
  background: orange;
}
25.CSS3中设置动画播放方向
animation-direction:normal
26.CSS3中设置动画时间外属性
animation-fill-mode:forwards;
27.CSS3 多列布局——Columns
columns: 200px 2;
28.CSS3 多列布局——column-count
column-count：auto | <integer>
29.CSS3 列间距column-gap
column-gap: normal || <length>
30.CSS3 列表边框column-rule
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
31.CSS3 跨列设置column-span
column-span: none | all
32.CSS3 跨列设置column-span
column-span: none | all
33.CSS3 伸缩布局（一）
34.自由缩放属性resize
resize: none | both | horizontal | vertical | inherit
25.CSS3外轮廓属性
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit