CSS3笔记之基础篇（一）边框

效果一、圆角效果 border-radius

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

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

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

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

效果二、阴影 box-shadow

box-shadow是向盒子添加阴影，可以添加一个或者多个，具体的语法为：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式]

其中

X轴偏移量：必需，水平阴影的位置。允许负值

Y轴便宜量：必需，垂直阴影的位置。允许负值

阴影模糊半径：可选，模糊距离，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊

阴影扩展半径：可选，阴影的尺寸，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：可选，省略默认为黑色

投影方式：可选，省略为外阴影方式，设置inset为内部阴影方式

效果三、边框图片border-image

根据border-image的语法，如图

其中：repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复

           round可以理解为圆满的铺满，图片不会被裁剪，为了实现圆满所以会压缩（或拉伸）

           stretch就是拉伸，有多长拉多长，让图片拉伸成对应边框的长度

注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。