跳到主要内容

box-shadow

2023年03月28日
柏拉文
越努力，越幸运

一、认识​

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

二、语法​

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 边框内外（不指定向外）*/

box-shadow: offset-x offset-y blur-radius spread-radius color inset (一共支持六个参数)

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 边框内*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) inset;

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

2.1 取值​

  • inset: 如果没有指定inset，默认阴影在边框外，即阴影向外扩散。 使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。

  • <offset-x> <offset-y>: 这是头两个 <length> 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过 y 垂直方向向下。 <offset-x> 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看 <length> 。 如果两者都是 0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或 <spread-radius> 则有模糊效果。需要考虑 inset

  • <blur-radius>: 这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为 0，此时阴影边缘锐利

  • <spread-radius>: 这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。需要考虑 inset

  • <color>: 相关事项查看 <color> 。如果没有指定，则由浏览器决定——通常是color的值，不过目前 Safari 取透明。

三、场景​

3.1 单边阴影​

左边阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "-4px 0px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...

顶边阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "0px -4px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...

右边阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "4px 0px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...

底边阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "0px 4px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...

3.2 多边阴影​

左上阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "-4px -4px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...

右上阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "4px -4px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...

3.3 三边阴影​

无左阴影: 右上阴影和右下阴影结合即为无左阴影

实时编辑器
function Test(props) {
  const box = {
    width: "100px",
    height: "100px",
    boxShadow: "4px -4px 4px -4px red,4px 4px 4px -4px red",
  }
  return (
     <div style={ box }></div>
  );
}
结果
Loading...