div+css布局实现炫酷堆叠阴影图文卡片效果代码-html代码-BFW代码库

div+css布局实现炫酷堆叠阴影图文卡片效果代码

代码语言：html

代码描述：div+css布局实现炫酷堆叠阴影图文卡片效果代码

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

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

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

  
  
<style>
@import url("https://fonts.cdnfonts.com/css/mona-sans");
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { overflow: hidden; }
body {
    min-height: 100vh;
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; margin: 0;
    background: #343434;
    background: linear-gradient(
        180deg,
        #343434 0%,
        #252525 100%
    );
    font-family: "Mona-Sans", sans-serif;
	font-family: "Mona Sans", sans-serif;
}
/* ///////////////////// */

.card {
    position: absolute;
    left: 0; right: 0;
    top: 19%; 
    margin: auto;
    width: 320px; height:350px;
    border-radius: 16px;
    background: #191919aa;
    background: linear-gradient(
        180deg,
        #292929aa 0%,
        #191919cc 50%
    );
    backdrop-filter: blur(4px);
    box-shadow: inset 0 2px 2px 0 #e7c4a088,
    inset 0 -2px 2px 0 #0003;
    
    color: #ccc;
.........完整代码请登录后点击上方下载按钮下载查看