课程名称：十天精通CSS3

课程章节： 边框

主讲老师：大漠

课程内容：

今天学习的内容包括：圆角效果border-radius的使用？阴影box-shadow的使用？边框应用图片border-image的使用？

课程收获：

border-radius是向元素添加圆角边框。如果所有角都使用半径为5px的圆角，那么我们可以直接使用border-radius:5px，如果值有四个，那么四个半径值分别是左上角、右上角、右下角和左下角，顺时针。我们需要注意的是除了px单位，你还可以用百分比或者em，但兼容性目前还不太好。如果我们想要实现实心上半圆，那么我们可以把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致。我们还可以实现实心圆，就是把宽度与高度值设置为一致，并且四个圆角值都设置为它们值的一半。

box-shadow是向盒子添加阴影。支持添加一个或者多个。参数有X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];我们需要注意的是inset可以写在参数的第一个或最后一个，其它位置是无效的。

我们实现的效果有内阴影、外阴影以及多个阴影。如果添加多个阴影，只需用逗号隔开即可。阴影模糊半径参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小;

border-image的语法如下

如果参数为Round，那么Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；Stretch参数表示拉伸，有多长拉多长。我们需要注意的是在Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

今天学习了边框的2-1到2-4的4个小结，花费了40分钟，今天主要学习了border-radius的使用，学会了这个属性，我们可以实现各种各样的圆球，box-shadow我们可以给我们的网站增加阴影效果，这样使得边框看起来更炫酷。border-image我们可以给边框设置成我们想要的图片效果，这样不同的区域可以使用不同的图片边框。