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(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0