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>

ul.ul-cards {
    width: min(100%, 60rem);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    justify-content: center;
}
ul.ul-cards>li{
    --bg-color: #F2F2F2;
    --text-color: #333;
    --padding: 1rem;
    --circle-size: 5rem;
    --circle-expand: 1rem;
    --flap-height: 1.25rem;
    --flap-offset: 0.5rem;
    max-width: 15rem;
    margin-top: calc(var(--circle-size) / 2 + var(--circle-expand));
    margin-bottom: var(--flap-offset);
    background-color: var(--bg-color);
    background-image: linear-gradient(to bottom left, transparent 50%, rgba(0 0 0  / .125));
    border-radius: var(--padding);
    padding: var(--padding);

    --bs-rim: inset -0.1rem 0.1rem 0.1rem rgb(255 255 255 / .5);
    --bs-card-spread: 0.25rem;
    --bs-card-color:  rgb(0 0 0 / 0.02);
    --bs-card: 
        -0.1rem 0.1rem var(--bs-card-spread) var(--bs-card-color),
        -0.2rem 0.2rem var(-.........完整代码请登录后点击上方下载按钮下载查看