【CSS练习】如何用纯 CSS 创作一个金属光泽 3D 按钮特效

image.png

知识点

1. CSS变量
   由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。
   声明一个局部变量：

element {
  --main-bg-color: brown;
}

声明一个 全局 CSS 变量：

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

使用一个局部/全局变量：

element {
  background-color: var(--main-bg-color);
  color: var(--global-color);
}

2. :root
   CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。
   在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

3.calc()
可以用在任何一个需要、、、、或的地方。有了calc()，`你就可以通过计算来决定一个CSS属性的值了。

/* property: calc(expression) */
width: calc(100% - 80px);

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

4. perspective
   指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。

/* Keyword value */
perspective: none;

/*  values */
perspective: 20px;  
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;

5.text-shadow
为文字添加阴影。可以为文字与 text-decorations添加多个阴影，阴影值之间逗号相隔。

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

• 
  必选。这些长度值指定阴影相对文字的偏移量。 指定水平偏移量，若是负值则阴影位于文字左边。 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方
• 
  可选。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
• 
  可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。

6. box-shadow
   由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

/* 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: inset 5em 1em gold;

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

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

7. 单位

• 绝对单位
  像素 (px)、mm毫米（Millimeters）、cm厘米（centimeters）、in英寸（inches）、pt点（Points (1/72 of an inch)）、pc十二点活字（ picas (12 points.)）
• 相对单位
  em：1em与当前元素的字体大小相同
  ex, ch: 分别是小写x的高度和数字0的宽度
  rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸
• 无单位的值：0、无单位的行高
• 百分比
• 颜色：
  #ff0000、rgb(255,0,0)、red、rgba(255,0,0,0.5)
  --指定透明度，通过CSS——opacity属性 or rgba()
• 动画：
  deg transform: rotate(0deg);

---

代码

参考：https://segmentfault.com/a/1190000014599280