CSS浮雕效果

效果图：

HTML源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form><div class="segment"><h1>Sign Up</h1></div><label><input type="text" placeholder="Username" /></label><label><input type="password" placeholder="Password" /></label><button class="red" type="button" title="Login"> Log in <svg t="1730280552580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5041" width="16" height="16" style="vertical-align: middle;"><path d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z" fill="#ae1100" p-id="5042"></path></svg></button><div class="input-group"><label><input type="text" placeholder="Register By Email" /></label><button class="unit" type="button" title="Register"><svg t="1730281008926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6135" width="16" height="16"><path d="M722.6 645.295c17.497-26.999 9.793-63.072-17.206-80.567-21.997-14.255-45.104-26.406-69.045-36.377 69.66-51.387 114.937-134.006 114.937-227.013 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.223 175.527 114.811 226.919-51.763 21.557-99.309 53.261-140.153 94.103-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 61.579 0 121.298 17.606 172.699 50.915 27.002 17.498 63.074 9.793 80.567-17.206zM469.334 135.897c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442c-91.225 0-165.442-74.217-165.442-165.442s74.218-165.442 165.442-165.442z" p-id="6136" fill="#ae1100"></path><path d="M926.63 743.197h-66.992v-66.992c0-32.174-26.080-58.254-58.254-58.254s-58.254 26.080-58.254 58.254v66.992h-66.992c-32.174 0-58.254 26.080-58.254 58.254s26.080 58.254 58.254 58.254h66.992v66.992c0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254v-66.992h66.992c32.174 0 58.254-26.080 58.254-58.254s-26.080-58.254-58.254-58.254z" p-id="6137" fill="#ae1100"></path></svg></button></div></form><style>body,
html {background-color: #ebecf0;
}body,
p,
input,
select,
textarea,
button {font-family: "Montserrat", sans-serif;letter-spacing: -0.2px;font-size: 16px; /* $ruler: 16px */
}div,
p {color: #babecc; /* $color-shadow */text-shadow: 1px 1px 1px #fff; /* $color-white */
}form {width: 320px; /* $ruler * 20 */margin: 0 auto;
}.segment {padding: 32px 0; /* $ruler * 2 */text-align: center;
}button,
input {border: 0;outline: 0;font-size: 16px; /* $ruler */border-radius: 320px; /* $ruler * 20 */padding: 16px; /* $ruler */background-color: #ebecf0; /* $color-bg */text-shadow: 1px 1px 0 #fff; /* $color-white */
}label {display: block;margin-bottom: 24px; /* $ruler * 1.5 */width: 100%;
}input {margin-right: 8px; /* $ruler / 2 */box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff; /* $color-shadow, $color-white */width: 100%;box-sizing: border-box;transition: all 0.2s ease-in-out;appearance: none;-webkit-appearance: none;
}input:focus {box-shadow: inset 1px 1px 2px #babecc,inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}button {color: #61677c;font-weight: bold;box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc; /* $color-white, $color-shadow */transition: all 0.2s ease-in-out;cursor: pointer;font-weight: 600;
}button:hover {box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc; /* $color-white, $color-shadow */
}button:active {box-shadow: inset 1px 1px 2px #babecc,inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}.button .icon {margin-right: 8px; /* $ruler / 2 */
}button.unit {border-radius: 8px; /* $ruler / 2 */line-height: 0;width: 48px; /* $ruler * 3 */height: 48px; /* $ruler * 3 */display: inline-flex;justify-content: center;align-items: center;margin: 0 8px; /* $ruler / 2 */font-size: 19.2px; /* $ruler * 1.2 */
}button.unit .icon {margin-right: 0;
}button.red {display: block;width: 100%;color: #ae1100; /* $color-red */margin: 32px 0;
}.input-group {display: flex;align-items: center;justify-content: flex-start;
}.input-group label {margin: 0;flex: 1;
}</style></body>
</html>

相关参考：cssinspirationguide - csc inspiration guide onlinecsc inspiration guide onlinehttps://csscoco.com/inspiration/#/./shadow/relief-style-btn