自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。

在正式开始css3之前，先来介绍一些比较经典的css3实例，让大家好好感受一下css3的魅力，本文会提到以下几个css3的属性：

border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

border-radius

• 相信这个属性，写过css的同学都知道，用来产生圆角，比如画一个圆形：
  

  1 2 3 4 5 6

  div {     width:100px;     height:100px;     background:red;     border-radius:100px; //border-radius:100%; }

  
  
• 然后我们来看看它的语法：border-radius: [左上] [右上] [右下] [左下]，于是我们来画一个半圆
  

  1 2 3 4 5 6

  div {     width: 100px;     height: 50px;     background: red;     border-radius: 50px 50px 0 0; }

  
  
• 那如果要画一个椭圆该怎么办呢？你会发现上面的语法貌似做不到了，其实border-radius的值还有一种语法: x半径/y半径：
  

   

  1 2 3 4 5 6

  div {     width: 100px;     height: 50px;     background: red;     border-radius: 50px/25px; }

  

• 如果我要画半个椭圆，又要咋办呢？

  1 2 3 4 5 6

  div {     width: 100px;     height: 50px;     background: red;     border-radius: 100% 0 0 100% /50%; }

  

::after

这里拿个简单的例子来看，我们要画一个放大镜，如下图：

分析一下，这个放大镜可以由两个div组成，一个是黑色的圆环，一个是黑色把手（旋转45度）。所以我们就需要用两个div来实现吗？答案是NO，一个div也是可以的，我们可以借助::after来添加一个元素。同理如果需要三个div，我们还可以使用::before再添加一个元素。下面看一下代码：

attr和content

比如我们要实现一个悬浮提示的功能。传统方法，使用title属性就能实现，但是现在我们要更美观，可以使用css3提供的attr：能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。

假如我们的html代码如下：

我们来看看实现这个插件的css代码：

当hover的时候，在元素尾部添加一个内容为data-title属性值的元素，所以就实现了hover显示的效果，如下图所示：

box-sizing

我们知道，在标准盒子模型中，元素的总宽＝content + padding + border + margin。 css中的盒子模型大家可能都知道，但是这个盒子模型的属性可能没有那么多人知道，box-sizing属性就是用来重定义这个计算方式的，它有三个取值，分别是：content-box（默认）、border-box、padding-box

一般来说，假如我们需要有一个占宽200px、padding10px、border5px的div，经过计算，要这么定义样式。

然后我们来使用一下box-sizing属性。

linear-gradient

做活动页面的时候我们经常会遇到这样的需求：

顶部的中间一张大banner图片，然后整个区域的背景色要根据图片背景色渐变。就可以使用这个属性了。

是不是很有趣？其实，linear-gradient还有更多有趣的功能，你可以根据下面的动图去感受一下：

你以为这就完了？等等，还有更强大的呢！repeating-linear-gradient，来感受一下：

linear-gradient还有更加强大的功能，比如它可以给元素添加多个渐变，从而达到更NB的效果。

radial-gradient

上面的linear-gradient是线性渐变，这个属性是径向渐变。下面的代码实现了一个chrome的logo。