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);
  --tex.........完整代码请登录后点击上方下载按钮下载查看