css实现三维凹凸立体键盘按钮效果代码-html代码-BFW代码库

css实现三维凹凸立体键盘按钮效果代码

代码语言：html

代码描述：css实现三维凹凸立体按钮效果代码，类似键盘按下凹凸效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

<style>
@charset "UTF-8";
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 * 4. Render kerning consistently in all browsers.
 * 5. Correct font smoothing for macOS.
 * 6. Fix bottom navigation area issue for Safari 15+.
 */
html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3 */
  font-feature-settings: "kern";
  /* 4 */
  -webkit-font-feature-settings: "kern";
  /* 5 */
  -moz-font-feature-settings: "kern";
  /* 5 */
  -webkit-font-smoothing: antialiased;
  /* 5 */
  -moz-osx-font-smoothing: grayscale;
  /* 5 */
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
.........完整代码请登录后点击上方下载按钮下载查看