css布局实现图标居左图文卡片自适应响应式效果代码-html代码-BFW代码库

css布局实现图标居左图文卡片自适应响应式效果代码

代码语言：html

所属分类：响应式

代码描述：css布局实现图标居左图文卡片自适应响应式效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css">
  
<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body { min-height: 100vh; padding: 2rem; background-color: #E5E6EB; display: grid; place-items: center; background-image: radial-gradient(circle at top left, transparent 25%, rgb(0 0 0 / .25)) }
img { max-width: 100%}

ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2rem;
  list-style: none;
}
.card {
  display: flex;
  flex-direction: column;
  max-width: 15rem;
  --iconS: 6rem;
  --iconOffsetX: calc(var(--iconS) / 4);
  --iconOffsetY: calc(var(--iconS) / 2.5);
  margin-top: var(--iconOffsetY);
  margin-inline: var(--iconOffsetX);
  border-radius: 1rem;
  font-family: 'Roboto', sans-serif;
  color: #333;
  background-color: #fff;
  --shadowSurface: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / .25);
  --bgGradient: radial-gradient(circle at bottom right, transparent, rgb(0 0 0 / .1));
  background-image:
    radial-gradient( circle at 
        calc(var(--iconOffsetX) * -1 + var(--iconS) / 2) 
        calc(var(--iconOffsetY) * -1 + var(--iconS) / 2), 
      rgb(0 0 0 / .4) calc(var(--iconS) / 2), 
      transparent calc(var(--iconS) / 1.6)
    ),
    radial-gradient( circle at 
        calc(var(--iconOffsetX) * -1 + var(--iconS) / 2)
        calc(var(--iconOffsetY) * -1 + var(--iconS) / 2),
      var(--accent-color) calc(var(--iconS) / 1.4),
      transparent calc(var(--iconS) / 1.4 + 1px)
    ),
    var(--bgGradient);
  --shadowInsetLight: inset 0.125rem 0.125rem 0.125rem rgb(255 255 255 / .5);
  --shadowInsetDark: inset -0.067rem -0.067rem 0.067rem rgb(0 0 0 / .5);
  box-shadow: 
    var(--shadowInsetLight),
    var(--shadowInsetDark),
    var(--shadowSurface)   
}
.card .icon {
  width: var(--iconS);
  aspect-ratio: 1;
  margin-top: calc(var(--iconOffsetY) * -1);
  mar.........完整代码请登录后点击上方下载按钮下载查看