note

Appearance

边框 ​

border-radius ​

0px

box-shadow / 阴影 ​

投影效果

MDN 文档

css
box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色]
  [投影方式];

x 轴偏移量、y 轴偏移量：必须，其他皆为可选。

阴影模糊半径：只能为正数，为 0 不具有模糊效果。越大边缘越模糊

阴影扩展半径：可以是负数。大于 0，整个阴影扩大；反之缩小。

投影方式：

  • outset 外阴影吗，默认
  • inset 内阴影

inset 可以写在参数的第一个或最后一个，其它位置是无效的。

支持添加一个或者多个。

css
.border-demo-01 {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2), -18px -18px 30px rgba(255, 255, 255, 1);
  transition: all 0.2s ease-in-out; /* 动画在这里 */
}

.border-demo-01:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
    inset 18px 18px 30px rgba(0, 0, 0, 0.1), inset -18px -18px 30px rgba(255, 255, 255, 1);
}

border-image ​

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image

border-image 需要配合 border-width、border-style 一起使用。

border 需要在 border-image 前面定义。

背景图：

值：roundrepeatstretch

round 为了铺满，会有压缩（或拉伸）。

repeat 会一直重复，然后超出部分剪裁掉。

stretch 拉伸，变形严重。