css实现引用卡片效果代码-html代码-BFW代码库

css实现引用卡片效果代码

代码语言：html

代码描述：css实现引用卡片效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');
/* demo setup */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body { min-height: 100vh; padding: 2rem; background-color: #EBEBEB; font-family: 'Open Sans', sans-serif; }
body > * + *  { margin-top: 1.5em }
h1{ text-align: center; font-weight: 800; color: rgb(6 6 6); text-transform: uppercase }
blockquote { max-width: 25rem; margin-inline: auto }

/* blockquote card colors */
blockquote.q-card-color-1{
  --accent-color: rgb(32 32 54);
  --bg-color: rgb(30 145 254);
  --dot-color: rgb(255 255 255 / .35);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(243 243 243);
}

blockquote.q-card-color-2{
  --accent-color: rgb(243 243 243);
  --bg-color: rgb(33 29 30);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(33 29 30);
}

blockquote.q-card-color-3{
  --accent-color: rgb(30 145 254);
  --bg-color: rgb(32 32 54);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(243 243 243);
}

/* blockquote card setup*/
blockquote.q-card{
  --padding: 1rem;
  padding: var(--padding);
  color: var(--text-color, black);
  font-weight: 600;
  background-color: var(--bg-color, white);
  display: grid;
  gap: 1rem;
  background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
  background-size: 0.5rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5)
  
}
blockquote.q-card::before{
  --qHeight: 4rem;
  content: "";
  margin-left: calc(var(--padding) * -1);
  margin-top: calc(var(--paddi.........完整代码请登录后点击上方下载按钮下载查看