css3---新特性

前两天在看网易的面试题，有一道是考察对css3新特性的background-clip等。表示我还是乖乖的去查了手册。
趁着css4还没出来还是要抓紧把css3弄起来啊。。要不然真的要忘光了。

---

css3边框

• border-radius

前年去边锋面试应聘当实习生的时候，技术主管就问了我这个问题。对于那时候只自学了css2的我来说，圆角啥的简直是难到我了。。依稀记得慕课网上教育我，用圆角，找个图片加背景图吧。〒▽〒

border-radius:10px; //四个角统一半径。
border-radius:10px 20px; //左上角和右下角一样，右上角和左下角一样。
border-radius:10px 20px 30px;//左上角10px,右上角和左下角20px,右下角30px。
border-radius:10px 20px 30px 40px;//左上角10px,右上角20px，右下角30px，左下角40px。

讲道理圆角属性很实用。而且画圆一级棒。我已经脑补了一堆的动画。。(ง’̀-‘́)ง

border-radius:50%;  //圆角半径为长款的百分之50.

---

• box-shadow
  阴影，扩展性很大，炒鸡好用，能满足设计稿的属性都是好属性~ヽ(•̀ω•́ )ゝ

  box-shadow:h-shadow v-shadow blur spread color inset;
  
  *h-shadow:水平阴影位置,允许负值
  *v-shadow:垂直阴影位置,允许负值
   blur:模糊的距离
   spread:阴影的尺寸
   color:阴影的颜色
   inset:将外部阴影改为内部阴影
  

---

• border-image
  使用图像创建一个边框(我应该是不太会用这个属性，作为了解吧~)

---

css3背景

• background-image
  添加背景图片（很常用，都在怀疑是不是新特性。。）
  可以添加多个背景图像。

  background-image:url(地址)
  background-image:url(xxx),url(xxx);
  

---

• background-size
  指定背景图像的大小，可以使用像素或者百分比。

  background-size:80px 80px;
  ||
  background-size:100% 100%;
  

  ---

• background-origin
  指定了背景图像的区域位置
  content-box,padding-box,border-box

      background-origin:content-box;
  

  

---

*background-clip
背景裁剪属性，从指定位置开始绘制
content-box,padding-box,border-box
参考上图。

---

css3渐变

css3渐变解决了以前只能用图片实现渐变的问题，提高了性能。ヽ(•̀ω•́ )ゝ

• 线性渐变

  background:linear-gradient(direction,color-stop1,color-stop2,...)
  //direction默认为top，从上到下
  background:repeating-linear-gradient(color-stop1,color-stop2...)
  //重复的线性渐变
  

  ---

• 径向渐变

  background: radial-gradient(center, shape size, start-color, ..., last-color);
  //shape定义了形状，circle(圆形)或ellipse(椭圆形)
  background:repeating-radial-gradient(color-stop1,color-stop2...)
  //重复的径向渐变