CSS3 圆角与阴影

1. 决定 border-radius 的值是根据宽高计算的

div{
    width:100px;
    height:100px;
    border-radius:50%;
    /* border-radius: 50px;*/ /*根据自身宽高计算*/
 }

2. border-radius 四个方向值

border-radius:10px

四个方向的值都是10px; 写法方式同于下面四个方向值：

• 左上角 border-top-left-radius: 10px 10px;

border-top-left-radius: 10px； 简写方式和上面同理

• 右上角 border-top-right-radius
• 左下角 border-bottom-left-radius
• 右下角 border-bottom-right-radius

四个分别有两个方向值，分别是水平方向和垂直方向

3. border-radius 形成圆角的原理

设置的方向值会形成水平方向半径和垂直方向半径，水平半径和垂直半径构成一个圆（正圆、椭圆、不规则的圆等）与方形进行切割形成圆角

4. box-shadow 分别有内阴影和外阴影

外阴影五个值依次：

• 水平偏移量 （可以是负值）

正值：阴影向元素右方向外水平偏移
负值：阴影向元素左方向外水平偏移

• 垂直偏移量 （可以是负值）

正值：阴影向元素下方向外垂直偏移
负值：阴影向元素上方向外垂直偏移

• 高斯模糊

根据自身原来的边框两个方向模糊

• 缩放
• 颜色值
  外阴影六个值依次：
• inset (设置为内阴影)
• 水平偏移量 （可以是负值）

正值：阴影向元素左方向内水平偏移
负值：阴影向元素右方向内水平偏移

• 垂直偏移量 （可以是负值）

正值：阴影向元素上方向内垂直偏移
负值：阴影向元素下方向内垂直偏移

• 高斯模糊
• 缩放

正值（阴影大小向里延伸）；负值（阴影大小向外延伸）

• 颜色值

box-shadow 复合使用实例如下：

 box-shadow:inset 0px 3px 0px 0px red,
                  3px 0px 0px 0px black,
                  5px 0px 0px 0px yellow,
            inset 0px 0px 0px 0px blue;

最先设置的会覆盖下面的阴影，最先设置的元素在Z轴离我们更近