css3-01 选择器和一些新属性

CSS3现状
1、浏览器支持程度差，需要添加私有前缀
-webkit-
-moz-
-ms-
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
新增选择器
css3属性选择器
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 
css3伪类选择器
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 指定只有选择每个p元素是其父级的最后一个子级。  
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式 
CSS3伪元素选择器
:first-letter p:first-letter 选择每一个<P>元素的第一个字母或者第一个汉字 1
:first-line p:first-line 选择每一个<P>元素的第一行 1
      2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 
CSS3 文本阴影
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
 text-shadow: 5px 5px 5px #FF0000;
CSS3文本溢出
p.test1 {
//文本不换行
 white-space: nowrap; 
 width: 200px; 
 border: 1px solid #000000;
//多余的部分隐藏掉
 overflow: hidden;
//修剪文本。
  text-overflow: clip; 
}

css边界图片
border: 30px solid blue;
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */

     css box-sizing属性
box-sizing:content-box 可以动态挤内容给padding (margin没法挤)
box-sizing: content-box|border-box|inherit:

       css 调整尺寸
resize:both;//由用户调整大小
resize:none;//禁止用户调整大小

       css禁用按钮
cursor: not-allowed;

css动画
按钮动画
鼠标移动到按钮上后添加箭头标记
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}点击时添加 "波纹" 效果
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
点击时添加 "压下" 效果
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}