目录

1、边框(补习) border：

 2、CSS3 圆角 border-radius：

 3、盒子阴影 box-shadow ：

 4、CSS3 边界图片 border-image ：

---

菜鸟教程CSS3

<div class="box"></div>  // 下方样式全部基于  .box   实现

1、边框(补习) border：

 .box {   // 样式
    width: 100px;
    height: 100px;
    // 1px: 边框宽度； 
    // solid: 边框线条的形状 可选值(solid实线、dotted圆虚线、dashed长虚线)
    // #343434: 颜色(支持十六进制、英文等等)
    border: 1px solid #343434;
}

结果：

                     

 2、CSS3 圆角 border-radius：

.box {
  width: 100px;
  height: 100px;
  // 这里改变 solid 值为虚线时，你将得到一个虚线的圆
  border: 2px solid #343434;
  // 值可为百分比、px等单位，50%直接是圆
  border-radius: 50%;
}

 结果：

 3、盒子阴影 box-shadow ：

.box {
  width: 100px;
  height: 100px;
  border: 2px solid #343434;
  border-radius: 50%;
  // 第一个值：向右移动；
  //      二： 向下移动；
  //      三： 模糊程度；
  //      四： 阴影颜色
  // 前两个个值均可写为负数如：box-shadow: -10px -10px 5px #888888;
  box-shadow: 10px 10px 5px #888888;
}

结果：

                               

 4、CSS3 边界图片 border-image ：

注意: Internet Explorer 不支持 border-image 属性。

CSS3 border-image 属性 | 菜鸟教程

 持续更新中。。。