border

　　语法：border: border-width border-style border-color

　　border属性是一个用于设置各种单独边界属性的简写属性。border可以用于设置于一个或多个属性值, 若有缺省属性，则其缺省属性会被设置为浏览器默认值。但是无法像background一次设置多重背景一样同时设置多重(上下左右)的边框样式。

其中重点需要注意border对 border-image 属性的影响，虽然border不能够设置该属性，但是会把该属性重置为初始值none

border-width

定义

　　border-width属性设置盒子模型边框的宽度,边框四个方向的综合简写。

　　border-width可以同时分别设置边框四个方向的宽度,可细粒度分为border-top-width、border-right-width、border-bottom-width、border-left-width,这四个属性都可以当单独属性进行使用，与margin用法相同。

　　border-width接收的参数个数不一样时，表示四个方向不同边框的宽度；其中border-color、border-style两个属性的参数个数特性与border-width一致

一个值四个方向的边框方向同时设置为当前值
两个值前一个值表示上下边框宽度，后两个值表示左右边框宽度
三个值第一个值表示上边框宽度；第二个值表示左右边框宽度；第三个值表示下边框宽度
四个值第一个值表示上边框宽度；第二个值表示右边框宽度；第三个值表示下边框宽度；第四个值表示左边框宽度

// html部分
<body>
  <div class="box one">一个属性值</div>
  <div class="box two">两个属性值</div>
  <div class="box three">三个属性值</div>
  <div class="box four">四个属性值</div>
</body>

// style部分
<style>
    .box {
      display: inline-block;
      width: 150px;
      height: 150px;
      margin: 20px;
      border-color: pink green yellow purple;
      border-style: solid;
    }
    .one { border-width: 10px; }
    .two { border-width: 10px 15px; }
    .three { border-width: 10px 15px 20px; }
    .four { border-width: 10px 15px 20px 25px; }
</style>

属性值

全局关键字:
- inherit - 继承父级样式，仅对有继承特性的属性有效
- initial - 初始化为css规范中的默认值, 可用于css中所有属性
- revert - 还原浏览器内置样式，可用于css中所有属性
- unset - 若有从父级继承的值(可继承且有定义)，则相当于inherit，若为非继承属性则类似initial，可用于css中所有属性。最好是搭配all属性使用
专有关键字: thin、medium、thick
数值类型: length(不支持百分比)

默认值

　　border-width: medium为官方默认值。medium默认一般为 3px，原因是当border-style: double时，若想双线条展示出来，最低要有 3px。实测在谷歌浏览器中，其默认值偶尔为 1.5px。偶尔为 3px why?????

border-style

　border-style是用来设定元素所有边框的样式简写属性。其中四个边框样式属性与border-width一样可以分别使用：border-top-style、border-right-style、border-bottom-style、border-left-style

属性值

属性值	定义
`none`	默认值。关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
hidden	和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示
dotted	显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。
dashed	显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定
solid	显示为一条实线。
double	显示为一条双实线，宽度是 border-width 。
groove	显示为有雕刻效果的边框，样式与 ridge 相反。
ridge	显示为有浮雕效果的边框，样式与 groove 相反。
inset	显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。
outset	显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。

border-color

　　border-color是用于设置四个边框颜色的简写属性，其中四个边框颜色属性与border-width一样可以分别使用：border-top-color、border-right-color、border-bottom-color、border-left-color。

属性值

关键字
- inherit 继承
- currentcolor
- transparent 透明颜色，用于制作三角形等形状比较多见
颜色值
- 十六进制 #f6f6f6
- 颜色 red
- 函数 rgb rgba hsl hsla

默认值

　　border-color的默认值为 currentColor。currentColor 关键字表示：当前元素(或伪元素)所使用的color属性的计算值。其默认值为黑色，原因：全局根color颜色为黑色，继承自父级

经典示例

1、透明边框

　　透明边框的关键在于背景颜色background基于 border 之下，即使 border 设置成了透明边框，但因为在此之下还有一个背景颜色遮挡，视觉上看上去只是边框区域的背景颜色加了一点透明度。若想真正实现透明边框，需要处于 border 之下的background挪走。此处的关键属性即为 background-clip 指定背景background绘制区域。

// html
<div class="container">
    <div class="border-box example">
      分析background和border： border在background之上
    </div>
    <div class="border-box">
      假透明边框
    </div>
    <div class="border-box background">
      真透明边框: 设置背景的范围
    </div>
<div>

// css
<style>
    .container {
      padding: 10px;
      background-color: lightskyblue;
    }

    .border-box {
      width: 150px;
      height: 150px;
      margin: 20px;
      display: inline-block;
      background-color: green;
      border: 15px solid hsla(0,0%,100%,.5);
      /* 内联元素的默认值为baseline，两行的会向上一个line-height */
      vertical-align: middle;
      color: white;
    }

    .background {
      background-clip: padding-box;
    }
    .example {
      background-color: green;
      border: 15px dashed red;
    }
</style>

2、三角形

　　在设计三角形/梯形等图形时，必须了解一个css关键字 transparent，transparent 用来指定全透明的色彩，是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0) 这样的值。重点关注 透明 的特性，即在border中使用时在视觉上会显示出父级的背景色。只需要将不想要展示的 border-color 设置为此关键字即可

<div>
    <div class="basic"></div>
    <div class="basic none-width"></div>
    <div class="basic none-width triangle-two"></div>
    <div class="basic none-width triangle-one"></div>
    <div class="triangle"></div>
</div>

// css
<style>
.basic {
  width: 20px;
  height: 20px;
  margin: 20px;
  display: inline-block;
  border-width: 50px;
  border-style: solid;
  border-color: lightblue lightcoral lightgreen lightseagreen;
}

.none-width {
  width: 0px;
  height: 0px;
}

.triangle-one {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.triangle-two {
  border-top-color: transparent;
  border-right-color: transparent;
}

.triangle {
  margin: 20px;
  display: inline-block;
  border-style: solid;
  border-width: 50px 100px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: lightseagreen;
  border-left-color: lightskyblue;
}
</style>

3、勾和箭头

　　勾和箭头实际上只是在三角形的基础上，对边的宽度以及角度两者结合使用展示出不同的效果

// html
<div>
    <div class="tick"></div>
    <div class="tick arrow"></div>
</div>

// css
<style>
.tick {
  width: 50px;
  height: 50px;
  margin: 30px;
  display: inline-block;
  border-style: solid;
  /* border-width可以不写哦，会默认成浏览器内置的大小 css规范就是3px */
  border-width: 3px;
  /*可简写: border-color: transparent lightseagreen lightseagreen transparent;*/
  border-top-color: transparent;
  border-right-color: lightseagreen;
  border-bottom-color: lightseagreen;
  border-left-color: transparent;
  transform: rotate(-45deg);
}

.arrow {
  width: 50px;
  height: 84px;
  transform: rotate(45deg);
}
</style>

4、综合案例三道杠

　　三道杠这个示例运用到padding、background一些属性以及border，需要重点关注的是：当border连接处另外两侧的border没有设置时，表现为一个矩形而不是正方形。还有一个比较新的属性值 currentColor 的使用, 借助此属性可以很方便的统一 background-color和border-color。currentColor 表示当前元素父级元素的color值

// html
<div class="parent">
    <div class="single"></div>
    <div class="single three-line"></div>
    <div class="single three-line currentColor"></div>
</div>

// css
<style>
.parent {
  color: lightskyblue;
}
.single {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  border-top: 10px solid lightseagreen;
  border-bottom: 10px solid lightseagreen;
  background-color: red;
}

.three-line {
  height: 10px;
  padding: 30px 0px;
  background-clip: content-box;
}

.currentColor {
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
}
</style>

　　虽然border在边框画图等展示方面实力强悍，但如果需要多层边框时，也会存在力所不及的情况。因此我们可以寻找到其类似的兄弟属性来合作。

outline

　　outline 表示元素的轮廓，语法与border属性十分类似，分width、style和color。支持的关键字和属性与border属性一致，在此就不再详细写此属性的属性值分析。border-radius对此属性同样其作用。但此属性与border存在一个重大的区别：outline不占据任何空间。

outline-offet

　　outline-offset属性设置轮廓框架相对 border 边缘的偏移，支持负值

<div class="offset">border 边缘外的偏移</div>

<style>
.offset {
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 15px;
  color: #fff;
  background-color: #655;
  border: 5px double lightseagreen;
  outline: 5px double lightsalmon;
  outline-offset: -12px;
}
</style>

案例

1、hover高亮元素，不影响布局

　　在一些排版固定的场景下，若有需求hover状态需要元素边界高亮，甚至是扩展向外高亮时。解决方案有如下几种

增加border的宽度则会使得现有排版尺寸出现问题；
使用伪元素，但此方法过于繁琐。
比较推荐的方式是使用不占据空间(即不会改变布局) 的元素来处理此场景。推荐的属性有: outline、box-shadow。更常用的为 box-shadow

// html
<div>
我是一大段的文字，注意div会有空隙，此处涉及内联元素、white-space相关知识
<div class="outline">
    <div class="highlight">点击高亮</div>
    <div class="highlight">点击高亮</div>
    <div class="highlight">点击高亮</div>
</div>
</div>

// css
<style>
.outline {
  width: 336px;
  height: 112px;
  border: 1px solid lightskyblue;
  /* 清除white-space合并空白字符导致的间隙 */
  /* word-spacing: -5px; */
}

.highlight {
  width: 110px;
  height: 110px;
  display: inline-block;
  border: 1px solid rgb(143, 143, 245);
}

/* 清除white-space合并空白字符导致的间隙 */
.highlight:not(:first-child) {
  margin-left: -5.4px;
}

.highlight:hover {
  outline: 10px solid lightcoral;
}
</style>

2、自动填满屏幕剩余空间

<body>
  我是一大段的文字，注意div会有空隙，此处涉及内联元素、white-space相关知识
  <div class="outline">
    <div class="highlight">点击高亮</div>
    <div class="highlight">点击高亮</div>
    <div class="highlight">点击高亮</div>
  </div>

  <div class="footer">
    <p>Designed &amp; 学css 到张鑫旭</p>
  </div>
</body>

// css
<style>
body {
  margin: 20px 0px 0px 20px;
}
.outline {
  width: 336px;
  height: 112px;
  border: 1px solid lightskyblue;
  /* 清除white-space合并空白字符导致的间隙 */
  /* word-spacing: -5px; */
}

.highlight {
  width: 110px;
  height: 110px;
  display: inline-block;
  border: 1px solid rgb(143, 143, 245);
}

/* 清除white-space合并空白字符导致的间隙 */
.highlight:not(:first-child) {
  margin-left: -5.4px;
}

.highlight:hover {
  outline: 10px solid lightcoral;
}

.footer {
  height: 50px;
}
.footer > p {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  padding: 15px 0;
  background-color: #a0b3d6;
  outline: 9999px solid #a0b3d6;
  /* 根据当前元素所在的位置进行裁剪 clip: rect(top right bottom left) */
  clip: rect(0 9999px 9999px 0);
}
</style>

3、两层边框

　　outline属性相对于 box-shadow 来比，只能多加一层边框(特殊情况下，outline与border都使用double 可实现四层)， outline的优势之处在于参考(outline-offset图片)：能够自由的使用与border一致的样式，包括 dashed 虚线等

<div class="two-border">两层边框</div>

// css
<style>
.two-border {
  width: 150px;
  height: 150px;
  margin: 20px;
  border: 5px solid lightseagreen;
  outline: 5px solid lightsalmon;
}
</style>

box-shadow

　　box-shadow: [inset] x-offset y-offset blur-radius spread-radius color;

　　box-shadow 属性可以设置一个或多个下拉阴影的框，多个阴影之间使用逗号,分隔。颜色（color）也可以放在最前面的，inset值也可以放在最后面。box-shadow 与 outline 一样不属于盒模型的元素，不占据元素空间，不会影响界面布局，border-radius也起作用

属性值 & 默认值

属性值	描述
x-offset	`必填` 阴影水平偏移量，它可以是正负值。如为正值，则阴影在元素的右边；如其值为负值，则阴影在元素的左边
y-offset	`必填` 阴影垂直偏移量，它可以是正负值。如为正值，则阴影在元素的底部；如其值为负值时，则阴影在元素的顶部
blur-radius	`可选` 阴影模糊半径，它只能是正值。如值为0，则阴影不具有模糊效果；它的值越大，阴影的边缘就越模糊
spread-radius	`可选` 阴影扩展半径，它可以是正负值。如为正值，则扩大阴影的尺寸；如为负值，则缩小阴影的尺寸
color	`可选` 阴影颜色。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致。（经测试，在Safari上是半透明的，在chrome、firefox、ie上都是黑色的）。不推荐省略颜色值
inset	`可选` ；如省略，默认是外阴影；它有且只有一个值“`inset`”，表示为内阴影

案例

1、单侧阴影

<div class="box single">单侧阴影: 扩展半径抵消模糊半径，单侧不偏移</div>

<style>
.box {
  width: 200px;
  height: 200px;
  margin: 60px;
  float: left;
  color: white;
  background-color: #655;
}

.single {
  box-shadow: 0px 10px 3px -3px lightsalmon;
}
</style>

2、多彩云朵

　　云朵的实现是使用多个阴影进行叠加形成，多层阴影直接会相互重叠，将所有阴影的颜色修改为一致即可成为一个完整的整体。阴影之间的重叠规则：写在最前面的阴影会覆盖后面写的阴影

<div class="box">
    <div class="cloud"></div>
</div>

// css
<style>
.box {
  width: 200px;
  height: 200px;
  margin: 60px;
  float: left;
  color: white;
  background-color: #655;
}
.cloud {
  width: 60px;
  height: 50px;
  margin: 40px;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 
    100px 0px 0px -10px lightcoral,
    40px 0px lightcyan,
    70px 15px lightsalmon,
    30px 20px 0px -10px lightseagreen,
    70px -15px lightskyblue,
    30px -30px lightgoldenrodyellow;
}
</style>

3、多边框

阴影之间的重叠规则：写在最前面的阴影会覆盖后面写的阴影

<div class="box multi-border">多边框</div>

<style>
.box {
  width: 200px;
  height: 200px;
  margin: 60px;
  float: left;
  color: white;
  background-color: #655;
}
.multi-border {
  box-shadow: 
    0px 0px 0px 4px lightsalmon,
    0px 0px 0px 8px lightblue,
    0px 0px 0px 12px lightseagreen,
    0px 0px 0px 16px lightcoral,
    0px 0px 0px 20px lightskyblue;
}
</style>

4、新拟物设计

<div class="parent">
    <div class="object"></div>
</div>

// css
<style>
.parent {
  width: 300px;
  height: 300px;
  padding: 100px;
  background: #e0e0e0;
}
.object {
  width: 200px;
  height: 200px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow:  
    20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
    } 
</style>

border-image

　　border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat

　　border-image允许再元素边框上绘制图像。使用border-image属性将会替换掉border-style属性所设置的边框样式。 border-image不受border-radius影响

　　若同时存在 border 属性和 border-image 属性，注意要将， border-image 放在后面书写，border 内置了 border-image 的所有默认值，会将其重置为初始值，使其失效

<div class="layout">
    border-image想生效需要书写在border之后，border内置了border-image的默认值。
    若border书写在后，会将border-image覆盖
 </div>
  
<style>
.layout {
  width: 200px;
  height: 200px;
  margin: 30px;
  float: left;
  background: lightsalmon;
  border-image-source: url('../images/border.png');
  border-image-slice: 27;
  border: 20px solid lightseagreen;
}
</style>

若border-image-source的值为none或者图片不能显示，border的样式则将应用border-style

border-image-source

　　border-image-source的属性值为 <image> 类型，所有的图像类型都可以作为此属性的属性值：包括 url引入图片、渐变、svg等。默认值为：none。

border-image-slice

属性值

属性值	定义
number	不能有单位，直接进行设置
percentage	百分比，如果边框图片是300px *240px,取值为25% 则剪切了图片四边 60px
fill	填充，图片边界的中间部分将保留下来，默认情况下为空

border-image-slice取值个数不一样时，执行的标准与border-width一致

裁剪特性

　　border-image-slice属性会将border-image-source取到的边框背景切成九份(九宫格),再像bacground-image一样重新布置。裁剪特性是学习border-image的重中之重，需要完全理解，学会熟练裁剪九宫格的尺寸

border-image-source: url('./border-color');
border-image-slice: 27;

　　如下图显示，引入的边框背景图片为 81px✖️81px 的图片，再使用border-image-slice剪切,当前值设置为27表示 上(线1)右(线2) 下(线3) 左(线4) 四个方向距离图像边缘 27px 的位置处进行切割

　　切割完成后如下图所示，在图中border-top-right-image,border-top-left-image,border-bottom-left-image,border-bottom-right-image四个边角部分，在border-image中没有任何展示效果。把这个四个部分(2、4、6、8部分将固定在边框的四个角)称之为盲区。而对应的border-top-image、border-right-image、border-bottom-image、border-left-image在border-image中属于展示效果。

　　上下区域的border-top-image、border-bottom-image区域受水平方向border-image-repeat效果影响。左右区域border-left-image、border-right-image受垂直方向border-image-repeat效果影响。

 以上
 border-top-right-image、border-top-left-image、
 border-bottom-left-image、border-bottom-right-image、
 border-top-image、border-right-image、border-bottom-image、
 border-left-image
 为了方便理解而设置。实际css属性中并不存在该类属性

border-image-width

　　border-image-width 定义图像边框宽度。假如 border-image-width 大于已指定的 border-width，那么它将向内部(padding/content)扩展。若 borde-image-width 小于指定的 border-width, 则 borde-image 只会覆盖 border的外沿部分，borde-image 无法覆盖的内沿部分会表现与background一致。默认值为： 1，即与 border-width 一致

属性值

　　border-image-width 与 border-width 基本上一致，但两者也存在一些差异，border-image-width 不能单独设置一个方向的宽度。

数值: 数值会作为系数与 border-width 的值相乘得到宽度值
length: 指定宽度值
百分比: 百分比是相对元素自身的尺寸进行计算，水平相对width、垂直相对 height
关键字: auto，将 border-image-slice 的值作为宽度值

<div class="box same-with-slice">
    <p>1、当slice与width大小一致时，会完整展示四个盲区的图片大小，四边区域按repeat样式展示</p>
    <p>2、width大于border-width时，border-image会向内扩展</p>
</div>
<div class="box same-with-border">
    <p>1、width与boder-witdh一致时，border-image完整占据border的位置</p>
    <p>2、width小于slice时，四个盲区的图片会等比例缩放 </p>
</div>
<div class="box big-than-slice">
    <p>1、背景图片等比例放大</p>
</div>
<div class="box less-than-border">
    <p>1、width小于slice，背景图片等比例缩小</p>
    <p>2、image表现为width的大小，image只会覆盖border的最外沿，border 没被image覆盖的内沿部分会与background一致</p>
</div>
  
// css
<style>
.box {
  width: 200px;
  height: 200px;
  margin: 30px;
  float: left;
  /* 内联元素的默认值为vertical-align: baseline，多个内联元素在一起内容高度不一致会导致出现”高度差“ */
  /* display: inline-block; */
  background: lightsalmon;
  border: 20px solid lightseagreen;
  border-image-source: url('../images/border.png');
}

.same-with-slice {
  border-image-slice: 27;
  border-image-width: 27px;
}

.same-with-border {
  border-image-slice: 27;
  /* 此处可不设置，因 border-image-width 默认为1  即与border-width宽度一致 */
  border-image-width: 1; /* 表示 border-width * 1*/
}

.big-than-slice {
  border-image-slice: 27;
  border-image-width: 36px;
}

.less-than-border {
  border-image-slice: 27;
  border-image-width: 10px;
}
</style>

border-image-outset

　　border-image-outset 只向外扩张，只支持正值。一个比较重要的点：border-image-outset 不会影响界面布局，css中一共三个扩张不影响界面布局的属性：outline-offset、box-shadow、border-image-outset。

属性值

属性	定义
length	设置边框图像与边框（border-image）的距离，默认为0px
number	代表相应的 border-width 的倍数,纯数字不加单位

<div class="box outset">
    往外扩张10px
    1、不影响盒模型和布局
    2、多余的内沿border会表现与background一致
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  margin: 30px;
  float: left;
  /* display: inline-block; */
  background: lightsalmon;
  border: 20px solid lightseagreen;
  border-image-source: url('../images/border.png');
}

.outset {
  border-image-slice: 27;
  border-image-outset: 10px;
}
</style>

border-image-repeat

　　border-image-repeat定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。需要注意的是 border-image-repeat无法向上述属性一样设置三个值或者四个值。border-image-repeat只能设置水平方向和垂直方向的值

属性值

属性名	定义
stretch	默认值, 拉伸图片以填充边框
repeat	平铺图片以填充边框
round	平铺图像，当不能整数次平铺时，将根据情况放大或缩小图像
space	平铺图像。如果无法完整平铺所有图像，扩展空间会分布在图像周围）
inherit	继承父级元素的计算值。

背景图片

// html
<div class="border-image-stretch">stretch</div>
<div class="border-image-repeat">repeat</div>
<div class="border-image-round">round</div>
<div class="border-image-space">space</div>
// css
<style>
div {
    float: left;
    width: 100px;
    height: 100px;
    border: 10px solid goldenrod;
    margin: 10px;text-align: center;
}
.border-image-round {
  border-image: url('../images/border.png') 27 round;
}
.border-image-repeat {
  border-image: url('../images/border.png') 27 repeat;
}
.border-image-stretch {
  border-image: url('../images/border.png') 27 stretch;
}
.border-image-space {
  border-image: url('../images/border.png') 27 space;
}
</style>

效果图

案例

1、自适应卡片背景

<div class="tab">图片实现边框</div>

<style>
.tab {
  width: 120px;
  height: 40px;
  text-align: center;
  border-style: solid;
  border-width: 5px 5px 0px;
  border-image-source: url(../images/border-tab.png);
  border-image-slice: 5 5 0 fill;
  border-image-width: 5px;
}
</style>

2、条纹框

<div class="gradient">渐变</div>

// css
<style>
.gradient {
  width: 120px;
  height: 40px;
  margin: 20px;
  text-align: center;
  border: 5px solid;
  border-image: repeating-linear-gradient(-135deg, lightsalmon, lightsalmon 5px, transparent 5px, transparent 10px) 5;
}
</style>

border-radius(边框半径)

　　border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径(水平方向和垂直方向)时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。border

　　border-radius该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。即使元素没有边框，圆角也可以用到background 上面，具体效果受background-clip影响。

　　border-radius 的单值、双值、三值、四值用法与 border-width 一致。满足 上右下左 的顺序

单值表示全部角；
双值：前一个表示top-left、bototm-right，后一个表示top-right、bottom-left；
三值：第一个表示top-left 第二个表示top-right、bottom-left，第三个表示bototm-right；
四值: 分别表示top-left，top-right，bototm-right，bottom-left
　　 border-radius可以设置水平方向与垂直方向上的值，如果同时设置水平与垂直两者之间需要使用/分隔。如果单独设置border-xx--xx-radius中某一个方向的水平与垂直方向上可以用/分隔，也可以用空格分隔

如果border-radius的值小于border-width，border内边框仍然会是直角

`border-radius` 角度练习

<div class="one-angle">垂直、水平设置，一个角度</div>
<div class="multi-angle">垂直、水平设置，多角度</div>

// css
<style>
.one-angle {
  background: url('../images/background.jpeg');
  background-size: contain;
  /* border-top-left-radius: x方向 y方向 */
  border-top-left-radius: 20px 40px;
}

.multi-angle {
  /* 
    border-top-left-radius: 40px 20px;
    border-top-right-radius: 60px 80px;
    border-bottom-right-radius: 10px 70px;
    border-bottom-left-radius: 30px 100px;
  */
  background: url('../images/background.jpeg');
  background-size: contain;
  border-radius: 40px 60px 10px 30px / 20px 80px 70px 100px;
}
</style>

以上属性，综合渐变、背景、svg、动画等属性能有更加炫酷的效果。多多练习，推荐 css揭秘 勤加练手。codepen 上也有不少案例，fighting 坚持练习，深入理解属性

参考资料：

css世界(张鑫旭大侠系列)
MDN文档
揭秘css

CSS3之边框border、box-shadow、outline