CSS3新特性

一.CSS3 Rounded Corners

通过使用CSS3 border-radius属性， 可以得到圆角的效果。

#rcorners {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

image.png

显示效果如下，此时四个方向的圆角都会被设置。
如果想单独设置4个方位的圆角：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

---

二.CSS3 Border Images

通过使用CSS3 border-image 属性，可以将一幅图片设置成为一个元素的边框。
看下面一段代码：

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 100px;
        }

其中 boredr.png 是下面这幅图，大小为81*81：

border.png

显示效果如下：

image.png
注意：为了使 border-image 正常生效，需要设置元素的 border 属性。
border-image 属性是以下几个属性的简写：

• border-image-source：指定图片的位置。
• border-image-slice：指定图片的裁剪方式。
• border-image-width：指定图片的显示宽度。
• border-image-outset：指定图片相对于边框的偏移位置。
• border-image-repeat：指定四条边框的图片是拉伸还是重复。
  其中 border-image-slice 可以参考下面这篇文章：
  http://blog.sina.com.cn/s/blog_5f2389f90102vks0.html

---

三.CSS3 Backgrounds

• CSS3允许多个背景图片，有以下两种写法：

1. 一次性设置所有的背景图片和属性

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2. 单独设置每个背景图片的属性

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

• CSS3 Background Size
  在 background-size 出现之前，背景图片的大小是无法修改的。它是图片的实际大小。
  CSS3 background-size 属性允许你设置背景图片的大小。

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

background-size 有两个可选的值 contain 和 cover

contain：背景图片的大小尽可能的放大，但是不会超过容器的大小，所以容器有一部分可能没有被背景图片覆盖。

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 50px;
            background: url("border.png") no-repeat;
            background-size: contain;
        }

image.png

cover ：背景图片的大小尽可能的放大，放大到将容器完全覆盖为止。

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 50px;
            background: url("border.png") no-repeat;
            background-size: cover;
        }

image.png

background-size 也可以同时指定多个背景图片的大小：

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

• Full Size Background Image
  如果我们想要实现一个网页上固定的背景图片，那该怎么办呢？

html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

注意其中的 fixed，这个属性是 background-attachment 属性的一个取值。

• CSS3 background-origin Property
  background-origin 属性指定背景图片的位置，它又下面三种取值：

1. border-box：背景图片从左上角的边框开始。

image.png

2. padding-box（默认）：背景图片从padding的左上角开始。

image.png

3. content-box：背景图片从内容的左上角开始。

image.png

• CSS3 background-clip Property
  background-clip 属性指定了背景图片的填充区域，有以下三种取值：

1. border-box（默认）：背景填充至边框。
2. padding-box：背景填充至padding。
3. content-box：背景填充至content。

四.CSS3 Gradients

• CSS3 Linear Gradients
  语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(red, yellow); /* Standard syntax */
        }

image.png
Linear Gradient - Left to Right

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to right, red , yellow); /* Standard syntax */
        }

image.png
Linear Gradient - Diagonal（对角线）

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
        }

image.png

为了更加灵活的控制渐变方向，我们还可以自定义渐变角度。
语法：
background: linear-gradient(angle, color-stop1, color-stop2);

#myDIV {
            width: 250px;
            height: 200px;
            background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
        }

image.png

#myDIV {
            width: 250px;
            height: 200px;
            background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(90deg, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */
        }

image.png

不难发现角度的规律。

image.png

Using Transparency（透明度）
需要使用透明度的话，需要使用rgba()函数来定义颜色，该函数的最后一个参数用来指定颜色透明度。

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
            background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
            background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
            background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
        }

image.png
Repeating a linear-gradient

 #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            /* Safari 5.1 to 6.0 */
            background: -webkit-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Opera 11.1 to 12.0 */
            background: -o-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Firefox 3.6 to 15 */
            background: -moz-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Standard syntax */
            background: repeating-linear-gradient(red, yellow 20%, green 30%);
        }

image.png
其中颜色属性中的百分比指的是颜色停止位置占容器长度的百分比值。

• CSS3 Radial（径向） Gradients
  语法：

background: radial-gradient(shape size at position, start-color, ..., last-color);

Radial Gradient - Evenly Spaced（间隔均匀） Color Stops (this is default)

        #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
            background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
            background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
            background: radial-gradient(red, yellow, green); /* Standard syntax */
        }

image.png
Radial Gradient - Differently Spaced Color Stops（自定义间隔）

 #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
            background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
            background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
            background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
        }

image.png

Set Shape（定义渐变中心形状）
1.circle
2.ellipse（默认）

Repeating a radial-gradient

#grad {
  background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

五.CSS3 Shadow Effects

• CSS3 Text Shadow

h2 {
           text-shadow: 2px 20px;
        }

image.png

可以看出第一个长度参数控制的是阴影的水平位置，第二个参数控制的是阴影的垂直位置。

h2 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
        }

image.png

第三个参数控制的是阴影的特效，第四个参数可以自定义阴影颜色。

多个阴影

 h2 {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
        }

image.png

h2 {
            color: yellow;
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        }

image.png

• CSS3 box-shadow Property
  语法：box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需，阴影的水平位置
v-shadow	必需，阴影的垂直位置
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选，阴影的颜色。
inset	可选，将外部阴影 (outset) 改为内部阴影。

用box-shadow实现一个常用的卡片效果

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}

效果如下：

image.png

六.CSS3 Text

• text-overflow
  这个属性控制当你的文字超出容器时该如何显示。

1. text-overflow: clip;

2. text-overflow: ellipsis;

image.png

• word-wrap
  word-wrap：break-word属性使得一个很长的文字自动换行。
• word-break
  word-break属性指定了换行的规则。

1. keep-all：只在连字符处换行
2. break-all：默认换行。

七.CSS3 Web Fonts

Web字体允许Web设计人员使用未安装在用户计算机上的字体。

@font-face {
   font-family: myFirstFont;             //自定义字体名字
   src: url(sansation_light.woff);      //字体文件路径
}

div {
   font-family: myFirstFont;
}

八.CSS3 2D Transforms

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

1. The translate() Method

translate()方法可以使得元素相对于当前的位置水平和垂直移动。

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

移动之后的元素还是占据其之前在文档中的位置。

2.The rotate() Method

rotate()方法可以使得元素旋转一定角度。

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

image.png

3.The scale() Method

scale()方法可以使得元素在宽度和高度方向伸长或者缩小。

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

4.The skewX() Method

skewX()方法根据给定的角度使得元素在X轴方向倾斜。

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

image.png

5.The skewY() Method

skewY()方法根据给定的角度使得元素在Y轴方向倾斜。

6.The skew() Method

前两个方法的结合

7.The matrix() Method

matrix()是将之前的六个方法结合在一起：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

九.CSS3 3D Transforms

• rotateX()：将元素沿X轴旋转一定角度。
• rotateY()：将元素沿Y轴旋转一定角度。
• rotateZ()：将元素沿Z轴旋转一定角度。
  详细参考链接：https://www.w3schools.com/css/css3_3dtransforms.asp

十.CSS3 Transitions

CSS3 transitions 可以使的属性的变换更加平滑。

div {
    transition-property: width;     //指定要应用的属性
    transition-duration: 2s;        //指定时间间隔
    transition-timing-function: linear;    //指定过度类型
    transition-delay: 1s;     //指定延迟时间
}

transition-timing-function取值如下：

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end

十一.CSS3 Animations