一.圆角边框
在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来显示阴影


