前端学习—CSS3

一、初识CSS3

1、CSS3的优点：简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
**2、CSS3的前缀：**在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

二、边框

1、圆角效果（border-radius）
（1）border-radius：10px; （所有角都使用半径为10px的圆角）
（2）border-radius：5px 4px 3px 2px; （四个半径值分别是左上角、右上角、右下角和左下角，顺时针）
注意：不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。
（3）实心上半圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{
   
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

（4）实心圆：把宽度（width）与高度（height）值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

div{
   
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

2、阴影（box-shadow）
（1）box-shadow是向盒子添加阴影。支持添加一个或者多个。
很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
参数介绍：

注意：
1、inset 可以写在参数的第一个或最后一个，其它位置是无效的。
2、阴影模糊半径与阴影扩展半径的区别
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
（2）为元素设置外阴影：

.box_shadow{
   
  box-shadow:4px 2px 6px #333333; 
}

效果如下：

（3）为元素设置内阴影：

.box_shadow{
   
  box-shadow:4px 2px 6px #