OneYoung

Appearance

3-1.border-radius ​

border-radius 实际上是 4 个属性的简写，按顺序如下：

  1. border-top-left-radius
  2. border-top-right-radius
  3. border-bottom-right-radius
  4. border-bottom-left-radius

3-1-1.值的设置 ​

border-radius 根据简写程度可分为 4 种情况：

  1. 设置为 1 个值。
css
.demo1 {
  border-radius: 50px;
}
  1. 设置为 2 个值。
css
.demo2 {
  border-radius: 50px 25px;
}
  1. 设置为 3 个值。
css
.demo3 {
  border-radius: 50px 25px 50px;
}
  1. 设置为 4 个值。
css
.demo4 {
  border-radius: 50px 25px 50px 50px;
}

3-1-2.水平半径和垂直半径 ​

我们还可以利用 / 分割设置数值来更加细致的定义 border-radius 的水平半径和垂直半径。

/ 之前定义水平半径，/ 之后定义垂直半径。

css
.demo5 {
  border-radius: 50px 25px 50px 50px / 25px 25px 25px 25px;
}

但其实 / 前后的数值也支持简写方式，其具体顺序、规则和上一节相同。

css
.demo6 {
  border-radius: 50px / 25px;
}

3-1-2.百分比 ​

border-radius 的值不单单可以是具体单位 px，也可以是相对大小，譬如 %、em。

当 width 为 100px、height 为 150px时，以百分比 % 为例：

  1. 直接设置百分比。
css
.demo7 {
  border-radius: 50%;
}
  1. 设置水平半径和垂直半径为百分比。
css
.demo8 {
  border-radius: 50%/20%;
}

TIP

水平半径的参照是元素宽度 width，而垂直半径的参照则是元素高度 height。

  1. 为了验证上面的说明 TIP，这里设置下正常的 px 作对比。
css
.demo9 {
  border-radius: 50px/30px;
}

3-2.border-image ​

border-image 是一系列属性的简写形式。

  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

TIP

使用 border-image 时，要设置 border 属性。

因为一些属性会参照 border-width。

3-2-1.border-image-source ​

该属性用来设置 border-image 目标图片的引用地址。

css
.t1 {
  border: 27px solid transparent;
  border-image-source: url("./images/border.png");
}
border-image-source

3-2-2.border-image-slice ​

该属性用来设置图片的裁剪位置。

可设置 1~4 个值。目标位置分别是上、右、下、左，四刀切分为九宫格。

譬如本例中的图片是 81*81，那么我们将 border-image-slice 设置为 27，整个图片横竖会被三等分。

css
.t2 {
  border: 27px solid transparent;
  border-image-source: url("./images/border.png");
  /* 注意，这里不带px单位 */
  border-image-slice: 27;
}
border-image-slice

TIP

可以看见，中间部分的图片被拉伸了，这是因为 border-image-repeat 默认值为 stretch，即拉伸。

另外，border-image-slice 属性有一个额外的设置值 fill，它用来声明中间的图片是否作为背景填充。

css
.fill {
  /* fill只能设置在末尾项 */
  border-image-slice: 27 fill;
}
border-image-slice

3-2-3.border-image-width ​

该属性用来定义四个边框的截取图片的宽度。

该属性也可以设置 1~4 个值，分别对应上、右、下、左的图片宽度。

另外设置值的方式不同，其含义也不同：

  1. length：以 px 为单位的具体数字。
  2. %：百分值，参照 border-image-area 的宽和高来对应设置。
  3. number：数值，参照 border-width。

我们将 border-image-width 设置为 2，而 border-width 为 27px，这样计算之后，border-image-width 就是 54px。

css
.t3 {
  border: 27px solid transparent;
  border-image-source: url("./images/border.png");
  border-image-slice: 27;
  border-image-width: 2;
}
border-image-width

可以看到相对上例来说，图片宽度变为了 2 倍。

3-2-4.border-image-outset ​

该属性用来设置向四周扩散的范围。

该属性也可以设置 1~4 个值，分别对应上、右、下、左的扩散距离。

另外设置值的方式不同，其含义也不同（不支持 %）：

  1. length：以 px 为单位的具体数字。
  2. number：数值，参照 border-width。
css
.t4 {
  border: 27px solid transparent;
  border-image-source: url("./images/border.png");
  border-image-slice: 27;
  border-image-width: 2;
  border-image-outset: 1;
}
border-image-outset

可以看到，该例相对上例，四个方向各自向外扩散了 1 个 border-width 长度，即 27px。

3-2-5.border-image-repeat ​

始终要知道的一点是，border-image 利用了九宫格最终将图片分割为 9 份。

border-image-repeat 用来设置四个顶点之外的图片排列方式。

一共有三种形式：

  1. stretch: 拉伸。
  2. repeat: 重复。
  3. round: 平铺。
css
.t5 {
  border: 27px solid transparent;
  border-image-source: url("./images/border.png");
  border-image-slice: 27;
  border-image-width: 2;
  border-image-repeat: repeat;
}
border-image-repeat

TIP

repeat 与 round 的区别：

round 会凑整填充。repeat不进行拉伸，不凑整。

3-2-6.简写形式 ​

简写形式如下：

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

css
.shorthand {
  border: 27px solid transparent;
  border-image: url("./images/border.png") 27 fill / 2  round;
}
简写形式

推荐根据w3school进行调试理解各个属性。

参考文章：

  1. border-image属性
  2. 24张图攻克border-image