CSS3边框

1，border-radius

画一个圆：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #f40;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

border-radius 设置圆角  这是简写形式， 
其他四种形式分别为 
border-top-left-radius(左上角),
border-top-right(右上角),l
border-bottom-left-radius(左下角),
border-bottom-right-radius(右下角),
参数形式为 r1 px , r2 px; r1,r2分别为椭圆的实轴和虚轴  也可以直接写成  n px;

2，box-shadow

box-shadow：h-shadow v-shadow blur spread color inset/outset
设置div框的阴影  
h-shadow 水平阴影的位置 正值表明阴影在div右侧  ，负值为div左侧（必须）
v-shadow 垂直阴影的位置 正值表明阴影在div下方 ， 负值为div上方（必须）
blur 模糊距离（可选）
spread 阴影的大小，模糊半径（可选）
color 阴影的颜色（可选）
inset/outset 阴影模式，inset 内阴影 ，outset 外阴影 ，默认外阴影（可选）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      margin-left: 20px;
      margin-top: 20px;
      height: 100px;
      background-color: #f40;
      box-shadow: 4px 4px 8px #000;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      margin-left: 20px;
      margin-top: 20px;
      height: 100px;
      background-color: #fff;
      box-shadow: 4px 0px 8px #000, 0px -4px 8px blue, 0px 4px 8px red, -4px 0px 8px green;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

3，border-image

语法：

border-image: source slice width outset repeat | initial | inherit

值：

border-image-source：用于指定要用于绘制边框的图像的位置

border-image-slice：图像边界向内偏移

border-image-width：图像边界宽度

border-image-outset：用于指定在边框外部绘制border-image-area的量

border-image-repeat：用于设置图像边界是否重复（repeat），拉伸（stretch）或铺满（round）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 20px;
      width: 100px;
      height: 100px;
      border: 30px solid transparent;
      padding: 20px;
      border-image: url(border.png) 27 round;
    }
  </style>
</head>
<body>
  <div>This is a div</div>
</body>
</html>

图片下载地址：

https://www.runoob.com/images/border.png

下面这篇作者的文章写的很好，推荐看一下

https://segmentfault.com/a/1190000010969367