css3新特性

伪类

1.动态伪类选择器

:link 设置a对象在未被访问前的样式表属性

:visited 设置a对象在其链接地址已被访问过时的样式表属性

:hover 设置对象在其鼠标悬停时的样式表属性

:active 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性

定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active

2.结构性伪类选择器

:first-child 选择某个元素第一个子元素

:last-child 选择某个元素最后一个子元素

:nth-child() 选择某个元素的一个或者多个特定的子元素

:nth-last-child 选择某个元素的一个或者多个特定的子元素，从这个元素的最后一个子元素开始算

:nth-of--type() 选择指定的元素

:nth-last-of--type() 选择指定的元素，从元素的最后一个开始计算

:first-of-type 选择一个上级元素下的第一个同类子元素

:last-of-type 选择一个上级元素下的最后一个同类子元素

:only-of-type 选择的是它父元素唯一一个子元素

:empty 选择的元素里面没有内容

3.伪元素

:first-letter   将特殊的样式添加到文本的首字母

:first-line    将特殊的样式添加到文本的首行

:before   在某些元素之前插入某些内容

:after    在某些元素之后插入某些内容

色彩

1.透明

opacity:value       ----->  (0-1)

2.颜色

rgba(R, G, B, A)

R	正整数 | 百分数
G	正整数 | 百分数
B	正整数 | 百分数
A	Alpha 透明度 ( 0~1 )

hsla(H, S, L, A)

H	Hue(色调) ，红色：0 | 360，绿色：120，蓝色：240。 取值范围：0 ~ 360
S	Saturation(饱和度)。取值范围：0.0% ~ 100.0%
L	Lightness(亮度)。取值范围：0.0% ~ 100.0%
A	Alpha 透明度 ( 0~1 )

3.线性渐变

linear-gradient（）

background: linear-gradient(to bottom, #ffb400, #ffd700);

background: linear-gradient(to right, #ffb400, #ffd700);

 

4.径向渐变

radial-gradient（）

/*circle 圆*/
.circle{
    background-image: radial-gradient(circle at right,orange,green);
}
/*ellipse 椭圆*/
.ellipse{
    background-image: radial-gradient(ellipse at right,orange,green);
}      

css3实现三角形、菱形、平行四边形等

// 半圆
.testbody{
    width: 100px;
    height: 200px;
    border: 1px solid #ccc;
    background: red;
    margin: 50px auto;
    border-radius: 0px 100px 100px 0px;  
  }

// 菱形
.testbody{
    width: 200px;
    height: 200px;
    background: red;
    margin: 100px auto;
    transform: rotate(-45deg);
}

// 平行四边形
.testbody{
    width: 200px;
    height: 200px;
    background: #6a6;
    margin: 100px auto;
    transform: skew(20deg);
}

// 五角星
.testbody{
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 70px solid #f66;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    margin: 150px auto;
    transform: rotate(35deg);
  }
  .testbody::before{
        position: absolute;
        top: -50px;
        left: -69px;
        content: '';
        width: 0;
        height: 0;
        border-bottom: 80px solid #f66;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        transform: rotate(-35deg);
    }
  .testbody::after{
      position: absolute;
      content: '';
      top: 4px;
      left: -105px;
      width: 0;
      height: 0;
      border-bottom: 70px solid #f66;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      transform: rotate(-70deg);
  }

// 六角星
.testbody{
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 100px solid #f66;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    margin: 100px auto;
  }
  .testbody::before{
      position: absolute;
      content: '';
      top: 30px;
      left: -50px;
      width: 0;
      height: 0;
      border-top: 100px solid #f66;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
  }

盒子阴影效果

box-shadow : h-shadow v-shadow blur spread color inset;

元素	描述	必需
h-shadow	水平阴影的位置。允许负值	是
v-shadow	垂直阴影的位置。允许负值	是
blur	模糊距离	否
spread	阴影的尺寸	否
color	阴影的颜色。	否
inset	将外部阴影（outset）改为内部阴影	否

 

过渡

transition: property duration delay timing-function;

transition-property	过渡属性（默认值为all）
transition-duration	过渡持续时间（默认值为0s）
transition-timing-function	过渡函数（默认值为ease函数）
transition-delay	过渡延迟时间（默认值为0s）

动画

@keyframes配合animation使用

// 滚动条
.marquee {
  width: 100%;
  height: 32px;
  overflow: hidden;
  position: relative;
}
.marquee a {
  white-space: nowrap;
  position: absolute;
  line-height: 32px;
  animation: marquee 14s linear infinite;
  padding-left: 120%;
  text-decoration: none;
  color: #000;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

文字排版 

制作字体阴影

text-shadow: h-shadow v-shadow blur color; （这属性每次用的时候很尴尬，我一个前端这属性还是我们ui告诉我的）

text-shadow: 0 0 20px red;

文字排版益处自动省略号

text-overflow:clip|ellipsis|string;

clip 需要overflow:hidden支持，但是不加clip只要overflow:hidden却也可以实现效果

text-overflow:clip;
overflow: hidden;

新增字体单位rem

相对于应用<html>根元素的字体尺寸 。