跳到主要内容

圆角轮廓与阴影

border-radius 多值语法如何解析？​

  • 1 值: 四角;
  • 2 值: 左上-右下 + 右上-左下;
  • 3 值: 左上 + 右上-左下 + 右下;
  • 4 值: 左上 + 右上 + 右下 + 左下;
  • 成分属性: border-top-left-radius 等四向;
div {
  border-radius: 10px;
}

双参数 border-radius 如何书写？​

  • 用 / 分隔两组值;
  • 两组分别表示圆角椭圆的水平半径与垂直半径;
  • 每组内部按单参数规则解析;
div {
  border-radius: 10px 100px / 120px;
}

outline 与 border 有何区别？​

  • outline: 生成轮廓线, 位于 border 外侧, 不占布局空间;
  • 语法: 类似 border;
  • outline-offset: 轮廓偏移量, 向外为正;
a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
}

box-shadow 如何书写？​

  • 语法: offset-x | offset-y | blur? | spread? | color?;
  • 语法可选: color x y 或 x y color 等顺序;
  • blur: 阴影模糊半径;
  • spread: 阴影整体缩放;
  • inset: 内阴影;
  • 叠加: 逗号分隔多条阴影;
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
box-shadow:
  3px 3px red inset,
  -1em 0 0.4em olive;

aspect-ratio 如何设置宽高比？​

/* width / height */
aspect-ratio: 1 / 1;
/* 省略 height, 默认为 1 */
aspect-ratio: 1;
/* 替换元素使用自身长宽比, 其余元素无固定长宽比 */
aspect-ratio: auto;
/* 替换元素用 auto, 其余用 width / height */
aspect-ratio: auto 3/4;