圆角边框、盒子阴影、文字阴影

转载：https://jerry-z-j-r.github.io/2021/01/31/HTML-CSS-Cheat-Sheet-7/（来自 JERRY）

---

一、圆角边框

CSS3 新增了圆角边框样式。

==border-radius ==属性用于设置元素的外边框圆角。

语法：

border-radius: length;

原理：

border-radius 顾名思义：边框半径。

（椭）圆与边框的交集形成圆角效果。

注意：

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为圆形，那么只需要把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 如果是个矩形，设置为高度的一半就可以做 “胶囊” 效果了
• 该属性是一个简写属性，可以跟多个值
  • 四个值：左上角、右上角、右下角、左下角（从左上开始顺时针）
  • 三个值：左上、右上+左下、右下（对角为一组）
  • 两个值：左上+右下、右上+左下（对角为一组）
• 同时可以对特定角单独设置
  • 左上角：border-top-left-radius
  • 右上角：border-top-right-radius
  • 右下角：border-bottom-right-radius
  • 左下角：border-bottom-left-radius

二、盒子阴影

CSS 3 新增了盒子阴影。

box-shadow 属性用于为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须。水平阴影的位置，允许负值。
v-shadow	必须。垂直阴影的位置，允许负值。
blur	可选。模糊距离（虚实程度）。
spread	可选。阴影的尺寸（大小）。
color	可选。阴影的颜色，请参阅 CSS 颜色值（阴影多为半透明颜色）。
inset	可选。将外部阴影（outset）改为内部阴影（outset 不能指定，默认为空即可）。

三、文字阴影

CSS 3 新增了文字阴影。

text-shadow 属性用于为文本添加阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必须。水平阴影的位置。允许负值。
v-shadow	必须。垂直阴影的位置。允许负值。
blur	可选。模糊的距离（虚实程度）。
color	可选。阴影的颜色。参阅 CSS 颜色值。