边框、阴影和鼠标属性串讲

实现一个商城里常见的商品卡片效果

它应该具有以下几点特征：

右边和下边都有阴影
有悬浮的效果
滑过时鼠标是小手的图标
边框四角有一定的弧度

知识点

box-shadow

首先来说 box-shadow，这是在项目中经常用到的一种效果，给元素增加阴影。

它的语法如下：

可选值：inset，这是用来指定展示内阴影的属性值，当我们使用它时，就会使阴影落在元素盒子的内部，反之（即不使用时）就是展示向外扩散的阴影。此时的效果就是阴影会在：
- 边框之内
- 背景之上
- 内容之下
<offset-y> 和 <offset-x>：即水平方向和垂直方向的偏移值，它的单位是像素。当值为正值时 x 轴的阴影展示在元素右边，y 轴的阴影展示在元素的下方；反之一个在元素左边，一个在上边。两者加入都是 0，那么阴影就在元素的后面（就看不见了）。
<blur-radius>：可选值，这个值是用来设置阴影的模糊面积的，值越大模糊面积就越大，阴影的扩散范围会更广更淡。但是不能设置为负值。默认值是0，0 的时候阴影的棱角分明。
对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。
<spread-radius>：可选值，这个值会让人有所疑惑，因为它的作用是让阴影扩大缩小，这是不是和第三个值的概念很相近，但是大家注意：
1. 第三个值是不允许有负值的
2. 模糊面积和阴影面积是两个概念。模糊面积我们可以理解为让阴影是展示得更加的清晰还是具有明显糊度，而阴影面积则就是指它所要展示的范围大小
3. 正值扩大阴影，负值缩小阴影。默认为 0，为 0 时阴影和元素大小一样
color：可选值，最后一个就是用来设置阴影颜色的，也可以不指定，此时就完全交给浏览器来控制，通常会取 color 的值，不过 Safari 会展示透明色

我们可以使用 box-shadow 设置单个的阴影效果，也可以给一个元素设置多个阴影效果，使用逗号隔开即可。

blockquote {
  padding: 20px;
  box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(255,255,255),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}

特殊场景

当我们设置偏移值、模糊大小都为 0，而给阴影大小设置了一个具体值时，它会展示一个四边都是一样长度带颜色的 outline。如果有多个阴影时，阴影绘制由最后一个开始，故第一个设置的阴影将覆盖在后设置的阴影之上。

这种场景时，我们通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上。

cursor

这个属性我们也会经常用到，它就是用来设置鼠标箭头在浏览器中的展示形态。它的可用值有很多，感兴趣可以自行查阅一下文档，这里列举几个常用的：

pointer：即小手的状态
not-allowed：禁用状态
move：可被移动
zoom-in：可被放大
zoom-out：可被缩小

我们也可以使用 url 属性值来自定义鼠标的图标，只要提供一个关键字值作为兜底即可：

cursor: url(hand.cur), pointer;

border-radius

用来设置元素的外边框的圆角，现在流行 UI 组件库中的按钮、Card 等等都会用到它。

border 实际上是一个简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

书写规则为 border-<垂直方向属性>-<水平方向属性>-radius

场景

该属性的属性值可以设置为具体的像素，也可以设置百分比。当设置为百分比时它以元素自身的宽高为基准进行计算。

设置单个值：border: 30px
实际就是给四个角都设置了同样的值
设置两个值：border: 20px 15px
实际上第一个值表示左上和右下的圆角，第二个值表示右上和左下的圆角
设置两组值: border: 1em/5em
这里会在设置圆角时划分的更细，每个角或者说某一个角会按照水平半径和垂直半径进行计算。单个角设置水平和垂直半径时用空格隔开

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

/* 即每个角的水平半径为 1em，垂直半径为 5em */

border-radius 也经常被用来设置圆形，即当一个正方形的元素，它的 border-radius 为 50% 时，那在页面中的呈现效果就为一个圆形。

参考文档

目录

实现一个商城里常见的商品卡片效果

知识点

box-shadow

cursor

border-radius