圆角边框 盒子阴影 文字阴影

一.圆角边框

在css3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了

1.border-radius

border-radius属性用于设置元素的外边框圆角

border-radius：length；

radius半径(圆的半径)原理：椭圆与矩形边框的交集形成圆角效果 

 

2.如何把边框变成一个圆形边框 

 

如图所示当宽等于高等于2r时，所组成的边框就是一个圆形 

 

3.设置为圆角矩形 

当宽不等于高，且高等于2r时，为圆角矩形，如图所示

 

 

4.设置不同的四个角

 

 

 

 

二.盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset；

1.对于h v的移动方向如图所示

 

2.blur代表模糊的距离和程度 

这是blur为0的效果

 

blur为20的效果

 

 

3.spread传播在这里为阴影尺寸 

 

当尺寸还有其他数据为0时，本质上是阴影块和整个盒子重叠了 

不信请看垂直阴影向下面移动

4.color(阴影颜色)

但正常阴影不是黑色的，应该是加点透明，如图所示

 

 

5.inset内部阴影 

为了清楚的看到内部阴影相对外部阴影是什么效果，我把垂直距离调大点，如图所示 

外部阴影 

 

 

内部阴影 

 

 

三.文字阴影（text-shadow）

 可以使用text-shadow来显示阴影