css实现图文卡片布局代码-html代码-BFW代码库

css实现图文卡片布局代码

代码语言：html

代码描述：css实现图文卡片布局代码

代码标签： css 卡片

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700");

:root {
  --color-primary-100: #0E2131;
  --color-primary-200: #153149;
  
  --color-neutral-100: #B4D2EA;
  --color-neutral-200: #E6F0F8;
  
  --gap: 1rem;
  --gap-sm: 0.5rem;
  
  --radius: 1rem;
  --radius-sm: 0.5rem;
  
  --shadow-color: 208deg 87% 4%;
  --shadow-elevation-high:
    0px 0.1px 0.1px hsl(var(--shadow-color) / 1),
    0.1px 2.1px 2px -1.9px hsl(var(--shadow-color) / 1),
    0.4px 11.5px 10.8px -3.7px hsl(var(--shadow-color) / 0.78);
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: var(--color-primary-100);
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.card {
  background-color: var(--color-primary-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevation-high);
  color: var(--color-neutral-100);
  width: 95vw;
  max-width: 20rem;
  padding: var(--gap);
}

.card__img {
  position: relative;
  aspect-ratio: 10 / 9;
}

.card__img img {
  border-radius: var(--radius-sm);
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.card__body {
  font-weight: 300;
  line-height: 1.6;
  padding: var(--gap) 0;
  text-ali.........完整代码请登录后点击上方下载按钮下载查看